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

In this article Xiaobian for you to introduce in detail "the use of css3 animation need to use what rules", the content is detailed, the steps are clear, the details are handled properly, I hope that this "what rules need to be used in the use of css3 animation" article can help you solve your doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

Label definition and instructions for use

Using the @ keyframes rule, you can create animations.

Animations are created by gradually changing CSS style settings from one to another.

You can change the settings of the CSS style several times during animation.

The specified change occurs with%, or the keywords "from" and "to", which are the same as 0% to 100%.

0% is the beginning animation and 100% is when the animation is complete. (recommended study: CSS3 video tutorial. )

For optimal browser support, you should always define selectors of 0% and 100%.

Note: use the animation property to control the appearance of the animation, and also use selectors to bind the animation. .

Grammar.

@ keyframesanimationname {keyframes-selector {css-styles;}}

Value

Description

Animationname

Necessary. Defines the name of the animation.

Keyframes-selector

Necessary. The percentage of animation duration.

Legal value:

0-100%

From (same as 0%)

To (same as 100%)

Note: you can use an animated keyframes-selectors.

Css-styles

Necessary. One or more legitimate CSS style attributes

Example:

CSS3

Div

{

Width:100px

Height:100px

Background:blue

Position:relative

Animation:mymove5sinfinite

-webkit-animation:mymove5sinfinite;/*SafariandChrome*/

}

@ keyframesmymove

{

0% {top:0px;background:blue;width:100px;}

100% {top:200px;background:yellow;width:300px;}

}

@-webkit-keyframesmymove/*SafariandChrome*/

{

0% {top:0px;background:blue;width:100px;}

100% {top:200px;background:yellow;width:300px;}

}

Note: the @ keyframes rule is not compatible with IE9 and earlier browsers.

After reading this, the article "what rules do you need to use in css3 animation" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, 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.