1-7：2D转换、动画

1、2D转换：transform

1）CSS变形--旋转：rotate( )

扭曲：skew(X,Y )

缩放：scale(X,Y )

位移：translate(X,Y )

2、动画：

1）必要元素：

通过@keyframes指定动画序列；

通过百分比将动画序列分割成多个节点；

在各节点中分别定义各属性；

通过animation将动画应用于相应元素。

2）关键属性：

animation-name 设置动画序列名称

animation-duration 动画持续时间

animation-delay 动画延时时间

animation-timing-function 动画执行速度，linear、ease等

animation-play-state 动画播放状态，running默认，paused暂停

animation-direction 动画逆播，altermate，normal默认向前播放

// altermate动画在第偶数次向前播放，第奇数次向反方向播放

animation-fill-mode 动画执行完毕后状态

属性值

效果

none

默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处

forwards

表示动画在结束后继续应用最后的关键帧的位置

backwards

会在向元素应用动画样式时迅速应用动画的初始帧

both

元素动画同时具有forwards和backwards效果

animation-iteration-count 动画执行次数，，inifinate(无限次数)，默认是1