animation 详细讲解

animation

animation 属性是一个简写属性，用于设置六个动画属性

animation-name :

属性为 @keyframes动画规定名称。

animation-duration :

规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function :

规定动画的速度曲线。
linear：匀速
ease：默认。动画以低速开始，然后加快，在结束前变慢。
ease-in：动画以低速开始。
ease-out：动画以低速结束。
ease-in-out：动画以低速开始和结束。
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay :

规定在动画开始之前的延迟。

animation-iteration-count :

规定动画应该播放的次数。（n | infinite）

animation-direction :

规定是否应该轮流反向播放动画。
(normal:默认值。动画应该正常播放。 | alternate:动画应该轮流反向播放。)

animation: name duration timing-function delay iteration-count direction;
 animation: play    3s   linear    infinite

keyframes

keyframes 几种写法：

@keyframes play    {                          
     from{width:10%}
     to{width:100%}
 }
@keyframes play    {
    0%{width:10%}
    100%{width:100%}
} 
@keyframes play    {
    0%{width:10%}
    20%{width:30%}
    100%{width:100%}
 }
@keyframes play    {
    0%{width:10%}
    20%{width:30%}
    30%{width:30%}
    40%{width:30%}
    50%{width:30%}
    100%{width:100%}
}
@keyframes play{                          
     from{transform:rotate(0);
              -ms-transform:rotate(0); 	/* IE 9 */
              -moz-transform:rotate(0); 	/* Firefox */
             -webkit-transform:rotate(0); /* Safari 和 Chrome */
              -o-transform:rotate(0); 	/* Opera */
             }
     to{ transform:rotate(360deg);}
}

transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

常用的：translate，scale，rotate，skew

translate(x,y)，translateX(x)，translateY(y)，translate(x,y,z)，translateZ(z)

scale(x,y)，scaleX(x)，scaleY(y)，scaleZ(z)

rotate(angle)，rotateX(angle)，rotateY(angle)，rotateZ(angle)

skew(x-angle,y-angle)，skewX(angle)，skewY(angle)

@keyframes play{
        0%{  transform:translate(20px,30px)  }
        100%{  transform:translate(-20px,10px)   }
}
@keyframes play{
        0%{  transform:translate(20px,30px)   scale(.4)  }
        100%{  transform:translate(-20px,10px)    scale(1.2) }
}

transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property：规定设置过渡效果的 CSS属性的名称。
transition-duration：规定完成过渡效果需要多少秒或毫秒。
transition-timing-function：规定速度效果的速度曲线。
transition-delay：定义过渡效果何时开始。

语法：

transition: property duration timing-function delay;
div#ceshi{ transition:plays 4s linear;width:20px;color:red }
div#ceshi:hover{ width:100px,color:blue }