Deformation properties (transform) css3 the transition (TRANSTION), animation (Animation)

1, transform: Rotate rotation, movement Translate, Scale scaling, distortion of skew
    Transform: Rotate (± 30deg) positive: clockwise, negative: counterclockwise rotation.  Rotational
    transform: translate (100px, 20px)   translateX translateY translational
    transform: scale (2,1.5) scaleX scaleY   scaling
    transform: skew (30deg, 10deg)  skewX skewY twisted

2, TRANSTION: All EASE lS;
        . 1, gradually slows EASE :( )
        2, Linear :( uniform)
        3, EASE-in :( acceleration)
        4, EASE-OUT :( deceleration)
        5, EASE-in-OUT :( acceleration and deceleration)

3. @ keyframes rule is to create animation.

. Layer1  {
　　/ * Animation: Length Animated name; * /
　　Animation: myfirst . 3 S;

　　}

@keyframes myfirst{
    0%   {background: red; left:0px; top:0px;}
 25% {background: yellow; left:200px; top:0px;}
 50% {background: blue; left:200px; top:200px;}
 75% {background: green; left:0px; top:200px;}
 100% {background: red; left:0px; top:0px;}
 /*from{background:red}
 to{background:yellow}*/
}
@-webkit-keyframes myfirst{ /* Safari and Chrome*/
 0% {background: red; left:0px; top:0px;}
 25% {background: yellow; left:200px; top:0px;}
 50% {background: blue; left:200px; top:200px;}
 75% {background: green; left:0px; top:200px;}
 100% {background: Red; left: 0 PX; Top: 0 PX;} 
 / * from {background: Red} 
to {background: Yellow} * / 
} 
@keyframes rules and all the animation properties @keyframes predetermined shorthand property animation movie animation all properties, except animation-play-state animation-name @keyframes name of the animation movie animation-duration period to complete a number of seconds or milliseconds spent. The default is 0 animation-timing-function speed of the animation curve. The default is "ease" animation-delay long delay animation start. The default is 0 animation-iteration-count specified number of times the animation is played. The default is 1 animation-direction specifies whether the animation to play in reverse to the next cycle. The default is "normal" animation-play-state provisions of the animation is running or paused. The default is "running".

div
{
    animation-name: myfirst;
    animation-duration: 3s;
 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;
}