CSS 3 Animation

 

The HTML5 CSS3 allows the front-end wet guys to use simple CSS styles to write the animation effect. Before that, we may think of JavaScript, Flash, java Plug-ins. If JavaScript is used, it is not a bad thing, but if it is written, it is not ideal to force the client to install a third-party plug-in. That is why Google has spared no effort to promote its leading open-source project WebRTC () and integrate all the real-time communication functions into the browser, advanced applications such as video calls can be directly implemented by calling browser APIs in JavaScript! This was hard to think about before.

In addition, HTML5 standardizes many things that previously needed to rely on external programs or programmers to write a large number of JavaScript files. One purpose is to enrich Web design, discard third-party plug-ins, and make browsers clean.

Go far and return to the animation.

Define Animation

Defining an animation in CSS3 is very convenient. It works like using Adobe Flash to make animations.

I still remember the simple Flash animation I learned when I was playing Flash. For example, to define the starting position and status of an object, a red 50x50 rectangle is located in the center of the image and then positioned on the timeline for 3 seconds, set the rectangle to 100X100 yellow. Right-click to add the animation. Such a simple animation is complete.

The following is the CSS implementation of such an animation.

Therefore, we want to include the font file in CSS. In other words, we want to send the font file to the client. So the implementation needs to be changed. At this time, @ font-face is used to specify the path of the font file. At this time, we first saw the introduction of a @ symbol.
The modified code is as follows.
 
 

  
  
@ Font-face is used to define a font face named 'mfmfont '.
  
  
Then, specify the font-family as the mfont defined just now by specifying the required page element'
 
 
The font has been applied and we can find in the Resource that the font file has been sent to the client browser.
From the above we can roughly understand the @ symbol in this case. Although it is not correct (for example, @ import, @ media), it defines a variable in a special case, here we define the font. In the animation, we define the animation key frame. Then we will use this defined variable elsewhere in the CSS code.
Key Frame
What is a key frame. As described in the Flash principle, we know that an animation actually consists of many static images. The first static image can be expressed as a frame. Key Frames are those that reflect significant physical changes in the animation process.
 
For example, in the previous example, when the element div changes from 50X50 red to the 100X100 yellow state, the two states at the end play a key role in animation definition. Therefore, these two States are the key frames of the entire animation.
@ Keyframes: defines the animation key frame.
Now we can see that @ keyframes does not think this @ symbol is awkward. We use it to define the key frames of an animation.
Two important points for defining a key frame in CSS code are the name and time point.
The State part specifies the style of the element, so it can be a variety of CSS code you want, color size transparency rotation, etc. 'From' specifies the starting state of the animation process, and 'to' specifies the state of the element at the animation end. Therefore, the entire animation changes from the starting state specified by from to the specified state.
If we have already created an HTML document, its structure is simple and there is only one div used to render the animation.
For the above example, the animation definition is like the following:

 
 

  
  
The animation is named 'example'
  
  
At the beginning of the animation, 'from' indicates that the element length is 50px in width and 50px in width, and the background color is red.
  
  
At the end of the animation, 'to' indicates that the element length is PX and the width is PX. The background color is yellow.
  
  
For browsers using the webkit kernel, such as Chrome, Safari needs to use the-webkit-prefix, so two sets of code need to be written to ensure that it can work in Chrome or Safari.
 
 
 
Of course, the definition of State is not limited to the start and end time points. We can specify the State of any time point element in the animation process. The following is another way to define a key frame.
The above defines the State of three time points, namely 0%, 50%, and 100%, during the animation process. For example, if we define an animation with a length of 10 seconds, 0% means that when the animation starts at 0 seconds, the code after 0% specifies what the elements are like when the animation starts, then 50% is what the elements look like when the animation goes to 5 seconds. At last, 100%, the animation is played to 10 seconds, that is, the state of the element at the animation end.
Therefore, there is no limit on the number of element states that can be specified in this way, and the animation can be controlled more accurately.
CSS3 animation attributes
When @ keyframes is used to define an animation, it does not produce any effect until we apply the animation to the corresponding element through the animation attribute.
The complete syntax for the CSS3 animation attribute is as follows:
Animation: name duration timing-function delay iteration-count direction;
 
 

  
  
Name is the key frame name defined by @ keyframes.
  
  
Duration indicates the animation duration.
  
  
Timing-function specifies the playing mode of an animation. It refers to the method used to transition from one state of an element to another. The available values include linear, internal, callback-in, partition-out, partition-in-out, cubic-bezr (n, n ). The discussion in each method exceeds the original plan, which is only listed here
  
  
Delay specifies a delay to prevent the animation from playing immediately.
  
  
Iteration-count specifies the number of animation repetitions. You can specify a number or use 'infinite 'to play the video continuously.
  
  
Direction specifies whether the animation is played reversely or alternately. Available values include normal, reverse, alternate, and alternate-reverse.
 
 
The name and duration parameters are required. If the default value of duration is not specified, the animation lasts for 0 seconds, so the animation effect cannot be seen.
The key frame has been defined before. Now we use animation to apply it to the corresponding element.
Now you can see the animation at the top of the page.
Specify the version of the Key Frame by percentage
As described above, we can specify the state of the element at any time point in the animation process through the percentage image. It is very easy to change the above version to the percentage version.
We only need to change the definition of the key frame from to the desired time percentage.
For example, the initial state does not change. When an animation is added to 50%, the color is yellow, the color is 75X75, and the green size is 100X100.
 
Effect:
 
 
 
Reciprocating Animation
If direction is specified as alternate, when the animation ends, it returns to the starting state of the animation in the opposite direction, and then plays the animation repeatedly.
 
 
 
 
With the basic understanding above, we can write some simple animations. But the really amazing CSS3 animation requires some effort. I won't continue here. Maybe I will introduce an example in the next article.
 
Another working demo (use the Chrome browser to view the effect ):
 
 
 
 
 
Reference:
 
 

  
  
Http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html
  
  
Http://www.w3schools.com/css/css3_animations.asp