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

Editor to share with you which is the attribute to achieve animation effects in css3, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

In css to achieve animation attributes: 1, "animation" attribute, this attribute with the "@ keyframes" rule can be used to animate the element; 2, "transition" attribute, this attribute can set excessive animation to the element.

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

In css, you can use the animation property and the transition property to achieve animation.

1. Animation attribute is an abbreviated attribute, which is used to set six animation attributes. The syntax is as follows:

Animation: name duration timing-function delay iteration-count direction

Where the attribute values are as follows:

Examples are as follows:

Div {width:100px;height:100px;background:red;position:relative;animation:mymove 5s infinite;-webkit-animation:mymove 5s infinite; / * Safari and Chrome*/} @ keyframes mymove {from {left:0px;} to {left:200px;} @-webkit-keyframes mymove / * Safari and Chrome*/ {from {left:0px;} to {left:200px;}}

Note: the animation attribute is not supported in Internet Explorer 9 and earlier.

Output result:

2. The transition attribute is an abbreviated attribute, which is used to set four transition attributes. The syntax is as follows:

Transition: property duration timing-function delay

The values of the property are as follows:

Examples are as follows:

Div {width:100px;height:100px;background:blue;transition:width 2s; / * Firefox 4 * /-webkit-transition:width 2s; / * Safari and Chrome * /-o-transition:width 2s; / * Opera * /} div:hover {width:300px;}

Please move the mouse pointer over the blue div element to see the transition effect.

Note: this example is not valid in Internet Explorer.

Output result:

The above is all the content of the article "which are the attributes to achieve animation in css3?" 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.