Animation CSS3 Animation Summary

A recent small game project uses CSS3 animated properties, such as transition, transform, and animation. After three weeks, finally done, use the weekend to do a good job of summing up.

1. KeyFrames
   This property is used to define a series of keyframes. That is, in the animation running the whole process of a middle point.
   

   Internet Explorer 10, Firefox, and Opera support @keyframes rules and animation properties.

   Chrome and Safari need to prefix-webkit-.

   
   
2. Properties of Animation
   
   
3. Animation abbreviation
   

   name Duration timing-function Delay Iteration-count direction;

4. Understanding of some key and difficult points
   Animation-delay
   This property is required to wait a few seconds before the animation starts. It would have been a good idea, but there was a question: if my animation was executed several times in a row, would it be delayed before the first execution or before every execution? The answer is: only for the first time.

<! DOCTYPE html>  
  Animation-fill-mode  
 This property has four values 
 None: Default value. Do not set the state of an object animation 
 forwards: Setting the state of an object to the end of the animation 
 backwards: Setting the state of an object to the start of the animation 
 both: Setting the state of an object to end or start the animation 
 At first it's a bit of a tangle of three different. Online also looked for, found that the internet said a little wrong. At least I tried. Forwards and both have the same effect. It's all the animation. Stop where it is. As for the backwards, it is always stopped at the beginning of the state. 
 
 <! DOCTYPE html> 
 
 <! DOCTYPE html> 
 

   

    
 The 
 
    
 
     
 
 Two-paragraph code mainly shows that the effect remains the same in the case of forwards and both, when the number of reverse run pairs is set. Because previously seen on the internet is that forwards in the even number of backlinks will be stopped in the key frame 100%, rather than 0%. 
 
 
     
  iteration-count 
  run times. 
 This has nothing to say, at a glance, but inadvertently found that the following special circumstances: 
  cannot be negative 
 can be 0      to 0, click to Count  
 can be decimal    decimal is not rounded. It's about how much to run, like. 5 to the 50% position. 
   
 
     
  Event 
 
  in the animated world, there is always the need for an animation to end before the next animation, this time to know when the last animation is finished. Although you can use settimeout to time to achieve the same effect, but the total feeling is not accurate. 
 Fortunately, CSS3 animations have JS events. 
  start: Animationstart  
  Iteration: animationiteration  
   End: Animationend   
 
    

   
 
<! DOCTYPE html>  
As you can see from the code, the iteration is triggered when the animation repeats.