How to realize animation effect by css3
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!
