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

Editor to share with you how the composition of css animation, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to understand it!

Css animation consists of three parts: Keyframe, animation attribute and css attribute. Keyframes are used to define the state of the animation at different stages; animation attributes are used to determine the length of the animation, the number of times, and what function to play the animation; and the css attribute is used to specify the state of the css element under different keyframes.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Css animation is composed of three parts, namely key frame (keyframes), animation attribute (properties) and css attribute.

Keyframe (keyframes)-defines the state of the animation at different stages.

Animation attributes (properties)-determines how long the animation will be played, how many times it will be played, and what function will be used to play the animation. (can be compared to audio and video player)

Css attribute-specifies the state of the css element under different keyframes.

1. Key Fram

Using the @ keyframes rule, you can define the behavior of a cycle of CSS animation, and you can create simple animations.

Animations are similar to transformations in that they both change the representation value of the CSS property over time. The main difference is that when the property value changes (for example, when the property value changes when hovering), the transformation is implicitly triggered, but the animation is explicitly performed when the animation attribute is applied. Therefore, the animation needs to display the explicit values of the animation properties. These values are defined by the animation keyframes specified in the @ keyframes rule. Therefore, the @ keyframes rule consists of a set of encapsulated CSS-style rules that describe how attribute values change over time.

2. Animation attributes

When you create an animation with @ keyframes, you need the animation attribute to apply the animation to the element and set the number of iterations of the animation, whether to alternate between the start and end values, and whether the animation should be run or paused.

Animation attributes can be understood as the related functions of the player, a most basic player should have: playback / pause, playback duration, playback order (reverse / positive / alternating playback), number of loops and so on.

Animation:

[animation-name] [animation-duration] / / name and duration of the animation

[animation-timing-function] [animation-delay] / / function on time (properties/t), delay time

[animation-iteration-count] [animation-direction] / / playback times, playback sequence

[animation-fill-mode] [animation-play-state]; / / set the appropriate style before or after playback, control the animation to run or pause

Syntax for Keyframe + animation attributes:

/ * define animation * / @ keyframes animation name {/ * style rules * /} / * apply it to the element * / .element {animation-name: animation name (declared in @ keyframes); / * or use the animation shorthand attribute * / animation: animation name 1s.}

What is in the curly braces of the @ keyframes rule?

In curly braces, we need to define keyframes or voyages that specify the value of the attribute being animated at a specific point during the animation. This allows us to control the intermediate steps in the animation sequence. For example, the @ keyframe of a simple animation can look like this:

@ keyframes change-bg-color {0% {background-color: red;} 50% {background-color: blue;} 100% {background-color: red;}} .demo {- webkit-animation:change-bg-color 5s infinite; animation:change-bg-color 5s infinite;}

Running effect:

'0%','50% 'and' 100% 'are all key frame selectors, each of which defines a key frame rule. The Keyframe declaration block of a Keyframe rule consists of attributes and values.

The above animation is similar to a simple transition effect: the background color changes from a value at the beginning of the animation (0%), to a value in the middle (50%), and to another value (100%) at the end of the animation. The 0%, 50%, and 100% Keyframe selectors define the point or percentage point at which you want the animation attribute to change. We can also use the selector keyword from,to instead of 0% and 100% respectively, which are equivalent.

@ keyframes change-bg-color {from {background-color: red;} 50% {background-color: blue;} to {background-color: red;}}

The Keyframe selector consists of one or more percentage values separated by commas or from and to keywords. Note that the percentage unit specifier must be used for percentage values. Therefore,'0' is an invalid Keyframe selector.

The following is an example of an animation with a Keyframe selector, including multiple percentage values separated by commas and / or keyword Keyframe selectors from and to.

@ keyframes bouncing {0%, 50%, 100% {/ * or from, 50%, to * / top: 0;} 25%, 75% {top: 100px;}}

The above @ keyframes rule defines that the top offset of the element will be equal to zero at the beginning, midway and end of the animation, and it equals 1/4 and 3/4 paths to 100px; this means that the element has moved up and down several times in the animation cycle.

The above is all the content of the article "how css Animation is made up". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.