CSS动画

**

一、CSS动画（animation）

1.CSS动画可以通过@keyframes来设置动画的序列。
2.CSS动画有两种表达方式：
①用fromh和to表示：from{}表示起始，to{}表示结束动画。
②用百分号表示：0%表示起始，100%表示结束动画。
2.CSS动画的应用标签
①animation-name :动画名字（与@keyframes中定义的名字绑定）
②animation-duration :动画持续时间（完成一次动画所需要的时间，默认值是0s）
③animation-iteration-count :动画迭代次数 （动画重复的次数）
a.number:默认值为1，不能为负数，可以为小数
b.infinite:无限循环
④animation-delay :动画延迟执行时间 （动画加载成功后到动画运行前的时间）
⑤animation-direction :动画方向
a.normal:(默认值，正常播放)
b.reverse:(播放顺序为反转播放)
c.alternate:(播放的顺序为正反交替播放)
d.alternate-reverse:(与alternate类似，第一次播放时需要反转)
⑥animation-play-srate :暂停/恢复
a.running :运行状态
b.paused :暂停状态
⑦animation-fill-mode :填充模式
a.none:默认值，不改变默认行为
b.forwards: 在动画结束后，保持动画最后一帧所设置的计算值
c.backwards:在动画结束后，保持动画第一帧所设置的计算值
d.both: 向前和向后填充模式都被应用
⑧animation-timing-function :动画的速度曲线
a.ease: 默认值，先快后慢
b.linear:线性增长，匀速
c.ease-in :先慢后快
d.ease-out :先快后慢
e.ease-in-out :先慢后快再慢

二、CSS过渡（transitions）

1.语法
div{
transition:< property>< duration>< timing-function>< delay>;
}
2.速记
transition是transition-property,transition-duration,transition-timing-function,transition-delay的速写形式，分别表示过渡属性，持续时间，时间曲线，过渡延迟

三、CSS变形（transform）

1.语法
div{
transform:xxx();
transform-origin:center;
}
2.标签
①transform-origin:用于指定一个元素变形的原点
a.指定一个值:left/right/center/yop/bottom
b.指定两个值：一个必须是length/percentage/left/center/right中的一个，另一个必须是length/percentage/left/center/right关键字中的一个。
c.指定三个值：前两个和“指定两个值”的用法相同，第三个值必须是length.它始终代表Z轴偏移量
②rotate:旋转
a.rotateX(angle):绕X轴旋转
b.rotateY(angle):绕Y轴旋转
c.rotateZ(angle):绕Z轴旋转
d.rotate(angle):与rotateZ()一致
③skew:倾斜
a.skew(ax,ay)
b.ax:表示水平方向的扭转
c.ay:表示垂直方向的扭转
d.也可以表示为：skewX(ax)和SkewY(ay)
④scale:缩放
⑤translate:移动
a.translate(tx,ty)
b.tx:在水平方向上移动的距离
c.ty:在垂直方向上移动的距离