Shulou(Shulou.com)06/03 Report--

This article mainly introduces what are the animation attributes in CSS3, which can be used for reference by interested friends. I hope you can learn a lot after reading this article.

CSS3 animation

Although transition can realize the transition of the initial state of the element to the final state in a specified time range within a certain period of time, and simulate a transition animation effect, its function is very limited. As a result, CSS3 adds an animation property, animation. Unlike the transition attribute transition property, the animation attribute of CSS3 can animate like Flash, controlling every step of the animation through keyframes to achieve more complex animation effects.

The realization of animation through animation in CSS3 is very similar to that of transition, which realizes the animation effect by changing the attribute value of the element.

The main difference between them is that the transition attribute can only be animated by specifying the initial state and end state of the attribute, and then making a smooth transition between the two states.

The animation effect realized by animation is mainly composed of two parts:

1)。 Declare an animation through keyframes similar to those in Flash animation

2)。 Invoke the animation of the Keyframe declaration in the animation property to achieve a more complex animation effect.

The CSS3 animation attribute animation, like the transition property of CSS3, is a compound attribute, which contains eight attributes:

Animation-name, mainly used to specify the name of a Keyframe animation, which must correspond to a @ keyframes rule. When CSS loads, the animation specified by animation-name is applied to perform the animation.

Animation-duration is mainly used to set the time required for animation playback, usually in seconds.

Animation-timing- function is mainly used to set the playback mode of animation, similar to transition-timing-function.

Animation-delay, mainly used to specify the animation start time, usually in seconds.

Animation-iteration- count, which is mainly used to specify the number of cycles for animation playback.

Animation-direction, mainly used to specify the playback direction of the animation.

Animation-play- state is mainly used to control the playback state of the animation.

Animation-fill- mode is mainly used to set the out-of-time attributes of animation.

: key Fram

In CSS3, @ keyframes is called a Keyframe

The role of @ keyframes:

When transition makes a simple animation effect, it includes the initial and final attributes of the element, a start action time and a delayed action time, as well as an action transformation rate. In fact, these values are all intermediate values. If you want to control them more carefully, for example, what actions to be performed in the first time period and what actions will be performed in the second time period (to be changed to Flash animation. That is, what action is to be performed in the first frame and what action is performed in the second frame), so it is difficult to achieve it with transition, and a "Keyframe" is needed to control it. This effect is achieved in CSS3 through the @ keyframes attribute.

Syntax for @ keyframes:

@ keyframes has its own syntax rules, and the naming starts with @ keyframes, followed by "name of the animation" followed by a pair of curly braces "{.}". The style rules are different in parentheses, a bit like the style of CSS. A style rule in @ keyframes consists of multiple percentages, such as 0% 100%. You can create more percentages in this rule and add different attributes to the elements that need animation in each percentage, so that the elements can achieve an ever-changing effect, such as moving, and changing the color, position, size and shape of the elements. It is important to note, however, that you can use "frome" and "to" to represent where an animation begins and ends, which means that from is equivalent to 0%, while to is equivalent to 100%. It is worth saying that 0% cannot omit the percentage symbol like other attribute values, and the percentage symbol must be added here (%). If it is not added, the @ keyframes is invalid and has no effect. Because the units of @ keyframes only accept percentage values. @ keyframes can specify any order to determine the key location of animation animation changes

Apply animation to elements in CSS:

Http:/ / www.iis7.com/a/lm/yczmljgj/

To apply animation to an element in CSS, you first create a named animation and then attach it to an element in the element's attribute declaration block. The animation itself does nothing; in order to apply animation to the element, you need to associate the animation with the element. The animation to be created must be declared using @ keyframes (or, for the current Webkit implementation, @-webkit-keyframes), followed by the selected name, which is mainly used to declare the animation, and then specify keyframes.

Detailed explanation of 8 sub-attributes of CSS3 animation

1. Animation-name call animation

The animation-name attribute, which is mainly used to invoke animation, is an animation defined by the @ keyframes Keyframe. The syntax for using this attribute is shown on the right: animation-name: none | IDENT [none | DENT] *

Animation-name is a name used to define an animation, which has two main values.

IDENT: is the name of the animation created by @ keyframes. In other words, the IDENT (identifier) here needs to be the same as the IDENT in @ keyframes. If it is inconsistent, you will not be able to achieve any animation.

None: default, when the value is none, there will be no animation, which can be used to override any animation.

2. Animation-duration sets the playback time of animation

Animation-duration is mainly used to set the playback time of CSS3 animation. The basic syntax is shown on the right: animation-duration:

[

] *

Animation-duration is similar to transition-duration in that it is used to specify the duration for an element to play an animation, that is, the time it takes to complete an animation from 0% to 100%.

Is a numeric value, in seconds, with a default value of 0, which means that the animation period is 0, which means there is no animation effect. A negative value is considered 0.

3. Animation-timing-function sets the playback mode of animation

The animation-timing-function attribute is mainly used to set the animation playback mode. The basic syntax is shown on the right: animation-timing-function: ease | linear | ease- in | ease- out | ease- in- out

Animation-timing-function refers to the rate at which the element changes the attribute value according to the advance of time. To put it simply, it is the way the animation is played. Like transition-timing-function in transition, it has the following transformation modes: ease, ease-in, ease-in-out, ease-out, linear, and cubic-bezier.

4. Animation-delay sets the time when the animation starts to play

The animation-delay property is used to define when the animation starts playing, whether it is delayed or ahead of time, and so on. The basic syntax for this attribute is shown on the right: animation- delay:

[

] * in other words, the animation- delay property is used to define the amount of time to wait before browsing begins to perform the animation.

5. Animation-iteration-count sets the number of animation playback times.

The animation-iteration-count property is mainly used to define the number of times the animation is played. Its basic syntax is shown on the right: animation-iteration-count: infinite |

[, infinite |

] * this property is mainly used to define how many times the animation is played, and its value is usually an integer, but you can also use numbers with decimals. Its default value is 1, which means that the animation will be played only once from start to finish. If the value is infinite, the animation will be played infinitely. Infinite (infinite loop)

6. Animation-direction sets the animation playback direction

The animation-direction attribute is mainly used to set the playback direction of animation. Its basic syntax is shown on the right: animation-direction: normal | alternate [, normal | alternate] * animation-direction is used to specify the direction of element animation playback. There are two main values. The default value is normal. If set to normal, each loop of the animation is played forward. The other value is alternate, which plays the animation forward if the animation is played an even number, and in the opposite direction if it is played an odd number of times. For example, in a bouncing animation, you can provide a Keyframe for a falling ball, and then set animation-direction to alternate to control the reversal of the animation every second.

7. Animation-play-state sets the playback status of the animation

The animation-play-state attribute is mainly used to control the playback status of element animation. Its basic syntax is shown on the right: animation-play-state: running | paused [, running | paused] * there are two main values: running and paused. Running is the default value, and its main function is similar to that of a music player. You can stop the animation being played through paused, or replay the paused animation through running. The replay here may not necessarily start from the element animation, or it may start from the position where the animation is paused. In addition, if you pause the playback of the animation, the style of the element will return to the original setting state.

8. Set the animation out-of-time attribute animation-fill-mode

The animation-fill-mode attribute defines the actions that occur before and after the animation begins, and its basic syntax is shown on the right: animation-fill-mode: none | forwards | backwards | both has four main values: none, forwards, backwards, and both. Its default value is none, which means that the animation will proceed and end as expected, and when the animation completes its last frame, the animation will be reversed to the original frame. When its value is forwards, the animation continues to apply the position of the last Keyframe after it ends. When its value is backwards, the initial frame of the animation is quickly applied when the animation style is applied to the element. When its value is both, the element animation has both forwards and backwards effects. By default, animation does not affect properties other than its keyframes, but using the animation-fill-mode property, you can modify the default behavior of the animation. The simple understanding is to tell the animation to wait for the animation to start on the first Keyframe, or stop on the last Keyframe at the end of the animation without going back to the first frame of the animation, or have both effects.

Thank you for reading this article carefully. I hope the article "what are the animation attributes in CSS3" shared by the editor will be helpful to you? at the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.