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


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

none
三次贝塞尔曲线：
$B(t)=P_0(1-t)^3+3p_1t(1-t)^2+3P_2t^2(1-t)+P_3t^3,t\in[0,1]$

二次贝塞尔曲线推导:
none
none
$由图可知，曲线方程即为P_F轨迹方程，根据定义$
$$\frac{AD}{AB}=\frac{BE}{BC}=\frac{DF}{DE}$$
$因为点F从D到E，D从A到B，E从B到C$
$所以,设P_i(x,y),t\in[0,1],即t_a=0,t_b=1$
$$P_B-P_A=v$$
$$P_D=vt+P_A=P_B+(1-t)P_A$$
$同理$
$$P_E=P_C+(1-t)P_B$$
$$P_F=P_E+(1-t)P_D$$
$联立上三式，即得$
$$P_F=(1-t)^2P_A+2t(1-t)P_B+t^2P_C$$
$PS:三次同理，无非多带几个P_D=P_B+(1-t)P_A方程$

timing_function中的贝塞尔曲线为三次，因此，需要四个控制点，但默认P_0为（0，0），而P_3为（1，1），cubic-bezier(x1,y1,x2,y2)

Animation-name && @keyframes

name置顶一系列的动画，而名称由@keyframes（关键帧）定义。

@keyframes

通过Persentage,from-to，控制动画中的中间步骤。

1
2
3
4
5
@keyframes IDENT {
    0% {Properties: Properties value;}
    Persentage {Properties: Properties value;}
    100% {Properties: Properties value;}
}

Transition

Transition（过渡），可使元素从一种样式变换为另一种样式。
transition: property,duration,timing-function,delay;

Transform

变形，包括了rotate（旋转），skew（扭曲），scale（缩放），translate（移动）以及matrix（矩阵变形）。

1.rotate

rotate(<angle>),对元素进行2d旋转，\为正即为顺时针。
rotate3d(x,y,z,<angle>)定义在x,y,z轴上的旋转，定义域在[0,1]，描述元素在围绕x/y/z周上的旋转矢量值。但在旋转时需注意transform-origin的设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*swing*/
.box {
  background: skyblue;
  width: 200px;
  height:100px;
}
.swing {
  transform-origin: top center;
  animation-name: swing;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
@keyframes swing {
  20% {transform:rotate3d(0,0,1,15deg);}
  40% {transform:rotate3d(0,0,1,-10deg);}
  60% {transform:rotate3d(0,0,1,6deg);}
  80% {transform:rotate3d(0,0,1,-5deg);}
  100% {transform:rotate3d(0,0,1,0deg);}
}

2.translate

translate(x,y)移动

3.scale

scale(x,y)水平竖直方向上的缩放

4.skew

skew(ax,ay)挤压，但坐标系和我们熟知略有不同，其中，ax为与x轴所成角，ay同理。
none

1
2
3
4
5
6
7
8
9
/*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);}
}