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

This article mainly explains "what is the method of customizing rules for css3 animation". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the method of customizing rules for css3 animation".

Css3 animation uses "@ keyframes" to customize rules. "@ keyframes" can specify animation rules, define the behavior of a cycle of CSS animation, syntax "@ keyframes animation name {keyframes-selector {css-styles;}}".

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

Keyframes is a rule of CSS3 that can be used to define the behavior of a cycle of CSS animation and to create simple animations.

The @ keyframes rule consists of a set of encapsulated CSS-style rules that describe how attribute values change over time.

@ keyframes animation-name {keyframes-selector {css-styles;}}

Keyframes-selector: defines the percentage of the animation, which is between 0 and 100 percent. An animation can contain many selectors.

Then, using different CSS animation attributes, you can control many different aspects of the animation, including the number of iterations in the animation, whether it alternates between the start and end values, and whether the animation should be run or paused. Animation can also delay its start time.

The @ keyframe rule consists of the keyword "@ keyframe", followed by an identifier of the animation name (which will be referenced by animation-name), followed by a set of style rules (separated by curly braces). The animation is then applied to the element by using the identifier as the value of the animation-name attribute.

Syntax:

/ * 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.}

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;}

'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.

Example of css @ keyframes specifying animation rules:

Div {width: 100px; height: 100px; background: red; position: relative; animation: mymove 5s infinite;-webkit-animation: mymove 5s infinite / * Safari and Chrome * /} @ keyframes mymove {0% {top: 0px; left: 0px Background: red;} 25% {top: 0px; left: 100px Background: blue;} 50% {top: 100px; left: 100px Background: yellow;} 75% {top: 100px; left: 0px Background: green;} 100% {top: 0px; left: 0px Background: red } @-webkit-keyframes mymove / * Safari and Chrome * / {0% {top: 0px Left: 0px; background: red;} 25% {top: 0px Left: 100px; background: blue;} 50% {top: 100px Left: 100px; background: yellow;} 75% {top: 100px Left: 0px; background: green;} 100% {top: 0px Left: 0px; background: red;}}

Thank you for your reading, the above is the content of "what is the method of customizing rules for css3 animation". After the study of this article, I believe you have a deeper understanding of what the method of customizing rules for css3 animation is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.