2D转换:transform
1)旋转:rotate( )
2)扭曲:skew(X,Y )
3)缩放:scale(X,Y )
4)位移:translate(X,Y )
动画
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