CSS3 Animation-animation Properties

Before we begin to introduce animation, we need to understand a special thing, that is, "Keyframes", we call him "key frame", played flash friends may not be unfamiliar with this thing. Let's take a look at what this "Keyframes" is. Before we used transition to make a simple transition effect, we included the initial and final attributes, a starting action time and a continuation action time, and the change rate of the action, in fact these values are an intermediate value, if we want to control the finer, For example, I want to take the first time to perform what action, the second time period to perform what action (in Flash said, is the first frame I want to perform what action, the second frame I want to perform what action), so we use transition is difficult to achieve, at this time we also need such a "keyframe" to control. Then the CSS3 animation is the "keyframes" this property to achieve this effect. Let's take a look at KeyFrames first:

KeyFrames has its own grammar rules, his name is "@keyframes" beginning, followed by the "name of the animation" plus a pair of curly braces "{}", the parentheses are some of the different time-period style rules, a bit like our CSS style. For a style rule in a "@keyframes" is made up of a number of percentages, such as "0%" to "100%", we can create multiple percentages in this rule, we give each of the percentages to animate elements with different attributes, This allows elements to reach a changing effect, such as moving, changing element color, position, size, shape, and so on, but one thing to note is that we can use "from" and "to" to represent where an animation starts and ends, meaning that the "from" is equivalent to "0%" and " To "equivalent to" 100% ", it is worth saying that" 0% "can not be the same as other attributes to the value of the percentage symbol omitted, we must add a percent sign here ("% ") if not added, we this keyframes is invalid, does not play any role. Because keyframes units accept only percent values.

The following describes the related properties of the animation animation:

First, Animation-name:

Grammar:

keyframename|none;

Value Description:

keyframename to keyframes keyframename is consistent, if not consistent, will not be able to achieve any animation effect; none is the default and no animation effect occurs when the value is none. In addition, we have this property as in the previous transition, we can attach a few animation to an element at the same time, we just need to use a comma "," separated.

Second, Animation-duration:

Grammar:

time;

Value Description:

Animation-duration is used to specify the length of time that an element plays an animation, and the value:<time> is a number, in S (seconds). Its default value is "0". This property is the same as the transition-duration used in transition.

Third, Animation-timing-function:

Grammar:

Linear|ease|ease-in|ease_out|ease-in-out;

Value Description:

animation-timing-function: Refers to the element according to the time of the advance to change the property value of the transformation rate, the simple point is the way the animation play. like the transition-timing-function in transition , he has the following six ways of transformation: Ease;ease-in;ease-in-out;linear;cubic-bezier. The specific use of the method you can click here to see how the use of transition-timing-function.

Four, Animation-delay:

Grammar:

time;

Value Description:

Animation-delay: is used to specify the element animation start time. The value time is a numeric value, in S (seconds), and the default value is 0. This property is the same as the Transition-delay use method.

Wu, Animation-iteration-count

Grammar:

n|infinite;

Value Description:

Animation-iteration-count is used to specify the number of cycles that an element plays an animation, which can take a value of n as a number, and its default value is "1"; Infinite is an infinite number of cycles.

Liu, Animation-direction

Grammar:

Animation-direction:normal|alternate;

Value Description:

Animation-direction is used to specify the direction in which an element animates, with only two values, the default is normal, and if set to normal, each cycle of the animation is played forward, and the other value is alternate, and his role is, The animation plays forward in an even number of times, and the odd number of times plays in the opposite direction.

Seven, Animation-play-state

Grammar:

animation-play-state:paused|running;

Value Description:

Animation-play-state is primarily used to control the playback state of element animations. There are mainly two values, running and paused where running is the default value. Their role is similar to our music player, you can stop the animation being played by paused, or you can replay the paused animation by running, our replay here is not necessarily from the beginning of the element animation play, but from the position you paused to start playing. In addition, if the animation is temporarily played, the style of the element will return to the most original setting state. This property is rarely supported by the kernel at this time, so just mention it slightly.

Practice Show:

HTML file

<! DOCTYPE html>
CSS file
#con img{animation:rotate 3s linear 0s infinite;-webkit-animation:rotate 3s linear 0s infinite;-moz-animation:rotate 3 s linear 0s infinite;-ms-animation:rotate 3s linear 0s infinite;-o-animation:rotate 3s linear 0s infinite;} @keyframes rotate{from{transform:rotate (0deg);} To{transform:rotate (360deg);} @-webkit-keyframes rotate{from{-webkit-transform:rotate (0deg);} To{-webkit-transform:rotate (360DEG);}} @-moz-keyframes rotate{from{-moz-transform:rotate (0deg);} To{-moz-transform:rotate (360DEG);}} @-ms-keyframes rotate{from{-ms-transform:rotate (0deg);} To{-ms-transform:rotate (360DEG);}} @-o-keyframes rotate{from{-o-transform:rotate (0deg);} To{-o-transform:rotate (360DEG);}}





CSS3 Animation-animation Properties