Animation processing in the CSS3

Div{width:200px;Height:200px;background:Red;margin:20px Auto;/*-webkit-transition-property:-webkit-border-radius; transition-property:border-radius;*/-webkit-transition-property:width;/*Transitions*/Transition-property:width;-webkit-transition-duration:. 5s;/*the time required to complete the transition*/transition-duration:. 5s;-webkit-transition-timing-function:ease-in;/*transition at a slow start*/transition-timing-function:ease-in;-webkit-transition-delay:. 18s;/*Start-up delay Time*/Transition-delay:. 18s; }Div:hover{transition:all . 28s ease-in. 1s;/*from the square effect, slowly transition to rounded corners*/width:400px; }

/*     transition-property: specifying CSS properties for a staging or dynamic simulation    transition-duration: Specify the time to complete the transition, set    the duration of the transition animation Transition-timing-function: Specify the transition function    transition-delay: Specify the start delay time, Specify the time that an animation begins to execute/    * Transition-timing-function includes the following functions:    ease        default value, speed from fast to slow, gradually slow    linear      constant speed    ease-in gradually     add effect, Accelerating faster and faster    ease-out    fade effect, slowing down faster and slower    ease-in-out first speed up and then slow down *

KeyFrames is called a keyframe starting with "@keyframes"

@keyframes ChangeColor { declared animations can be defined by themselves    0%{        background: red;    } {background:Orange;                  100%{        background: green;    }     }

Div{Animation-iteration-count:Infinite;/*Infinite Loops*/Animation-iteration-count:5;/*used to define the number of times the animation plays*/Animation-name:Move;/*specify a name for the @keyframes animation:*/animation-direction:Alternate;/*set the playback direction of an animation*/animation-play-state:paused;/*the animation does not play when the page loads*/}

Set animation playback direction  Animation-direction

It has two main values: normal, alternate

1, Normal is the default value, if set to normal, the animation of each cycle is to play forward;
2, Another value is alternate, his role is that the animation plays in the first couple of times to play forward, the odd number of times to play in the opposite Direction.

1 <div><span></span></div>2 3 Div{4 width:200px;5 Height:200px;6 Border:1px solid Red;7 margin:20px Auto;8}9 span{Ten Display:Inline-block; one width:20px; a Height:20px; - background:Orange; - Transform:Translatey (90px); the Animation-name:Move; - animation-duration:10s; - animation-timing-function:ease-in; - Animation-delay:. 2s; + Animation-iteration-count:Infinite; - animation-direction:Alternate; +} a  at @keyframes Move{ - 0%{ - Transform:Translatey (90px); -} - 15%{ - Transform:Translate (90px,90px); in} - 30%{ to Transform:Translate (180px,90px); +} - 45%{ the Transform:Translate (90px,90px); *} $ 60%{Panax Notoginseng Transform:Translate (90px,0); -} the 75%{ + Transform:Translate (90px,90px); a} the 90%{ + Transform:Translate (90px,180px); -} $ 100%{ $ Transform:Translate (90px,90px); -} -     }

Animation processing in the CSS3