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

Editor to share with you how to achieve the animation effect of css3, I believe that 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 understand it!

Css3- Animation (animation):

Has the following attributes:

1. Animation-name custom animation name

2. Animation-duration animation specifies how many seconds or milliseconds it takes to complete. The default is 0.

3. The time curve of animation-timing-function animation, linear is uniform, ease is slow first and then fast, and slows down before the end.

4. The delay interval before animation-delay animation starts. Default is 0.

5. The number of times animation-iteration-count animation is played. Default is 1.

6. Whether animation-direction takes turns to play the animation in reverse

7. Whether the animation-play-state animation is running or paused. Value: paused specifies to pause the animation; running specifies the running animation, default.

Code example (take Pan-translate as an example to illustrate the whole process of animation):

.warp {

Height:100px

Width:100px

Border:1pxsolid#eee

Background-color:#21B4BB

Animation-name:moves

Animation-direction:alternate

Animation-delay:0.2s

Animation-duration:5s

Animation-play-state:paused

Animation-iteration-count:3

/ * the above can be simplified as: * /

Animation:moves5slinear0.2s3

}

@ keyframesmoves {

/ * customized animation name * /

10% {

Background-color:#21B4BB

/ * time point can be arbitrary. 10% means that when the time reaches 10%, it is the state to be achieved by the element * /

Transform:translate (100pxPhone0)

-ms-transform:translate (100pxPhon0)

/ * IE9*/

-moz-transform:translate (100pxPhon0)

/ * Firefox*/

-webkit-transform:translate (100pxPhon0)

/ * Safari and Chrome*/

-o-transform:translate (100pxPhon0)

/ * Opera*/

}

30% {

Background-color:#008000

/ * at any point in time * /

Transform:translate (100pxMagol 100px)

-ms-transform:translate (100pxmel 100px)

/ * IE9*/

-moz-transform:translate (100pxmel 100px)

/ * Firefox*/

-webkit-transform:translate (100pxmel 100px)

/ * Safari and Chrome*/

-o-transform:translate (100pxmel 100px)

/ * Opera*/

}

60% {

Background-color:#444444

/ * at any point in time * /

Transform:translate (0100px)

-ms-transform:translate (0100px)

/ * IE9*/

-moz-transform:translate (0100px)

/ * Firefox*/

-webkit-transform:translate (0100px)

/ * Safari and Chrome*/

-o-transform:translate (0100px)

/ * Opera*/

}

100% {

Background-color:#70DBDB

/ * at any point in time * /

Transform:translate (0Pol 0)

-ms-transform:translate (0Pol 0)

/ * IE9*/

-moz-transform:translate (0Pol 0)

/ * Firefox*/

-webkit-transform:translate (0Pol 0)

/ * Safari and Chrome*/

-o-transform:translate (0Pol 0)

/ * Opera*/

}

}

The above is all the content of the article "how to achieve animation effect 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.