How to use CSS3 animation properties

Collect for everyone @keyframes rules and all animationproperties. We all know that @keyframes means prescribed animation. Here is a practical case. To help everyone understand, let’s take a look.

Property Description CSS

@keyframes Specifies animation.

animation Shorthand property for all animation properties, except animation-play-state property.

animation-name specifies the name of @keyframes animation.

animation-duration specifies the seconds or milliseconds it takes for the animation to complete one cycle. The default is 0.​ ​

animation-timing-function ​ ​ Specifies the speed curve of the animation. The default is "ease".

animation-delay Specifies when the animation starts. The default is 0.

animation-iteration-count Specifies the number of times the animation is played. The default is 1.     

animation-direction                                                                                                                                                             Specifies whether the animation will play in reverse in the next cycle. The default is "normal".

animation-play-state Specifies whether the animation is running or paused. The default is "running".

The following two examples set all animation properties:

OperaSafariChromeFirefoxInternet Explorer

Instance

Run myfirst animation and set all Attributes:

div

{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to the php Chinese websiteOthersrelated articles!

Related reading:

htmlSteps to achieve 3D suspension effect

How to use H5 to create fireworks particle effects

How to change the mouseover style without using CSS

The above is the detailed content of How to use CSS3 animation properties. For more information, please follow other related articles on the PHP Chinese website!