CSS3 Animation

---

animation: name,duration,timing-function,delay,iterationn,direction,fill-mode

Animation-delay

animation-delay: time
定义于动画开始之前的时间，默认0s，如定义为负值，则即刻开始，但会从序列中对应的|<\time>|位置开始，即-1s，动画会从1s时的位置开始。

Animation-direction

animation-direction: normal||alternate||reverse||alternate-reverse
简单的理解为动画运行的方向，有4个value：

• normal,即正向运动（默认）

• alternate，交替运动，即正反正反。。。

• reverse，反向运动

• alternate-reverse，先反向，再正向

Animation-duration

animation-duration: time
动画周期，负值、无单位均无效。

Animation-iteration-count

animation-iteraion-count: Num||infinite
动画被播放的次数，默认1，

Animation-play-state

animation-play-state: running||paused
定义动画是否运行或者暂停。

Animation-timing-function

animation-timing-function: value
定义在每一个动画周期上的节奏，有6个属性值：

• linear，匀速

• ease，由低速到高速公路

• ease-in，低速开始

• ease-out，低速结束

• ease-in-out，低速开始结束

• cubic-bezier，三茨贝塞尔曲线

cubic-bezier

贝塞尔曲线，即依据多个位置的点，绘制出的一条光滑的曲线。

[图片上传失败...(image-f055a-1544795420728)]
三次贝塞尔曲线：

---

二次贝塞尔曲线推导:

none
none
none

/*speed in*/
@keyframes lightspeedin {
  0% {transform:translate3d(100%,0,0) skew(-2deg);
  opcity:0;}
  
  60% {transform:skew(20deg);}
  80% {transform:skew(-5deg);}
  100% {transform:skew(0deg);}
}