1. 定义动画
方式一
@keyframes 动画名称{
from{
}
to{
}
}
方式二
@keyframes 动画名称{
0%{
}
100%{
}
}
2.动画配置
(1)animation
1）animation-name 动画名称
2）animation-duration播放时间
3）animation-delay动画延迟时间
4)animation-fill-mode 填充模式
backwards
动画准备时,动画状态为动画播放的第一帧(区别动画的起始位置)
forwards
动画结束后，动画状态保持为动画的最后一帧（从左到右结束后，就留在右边
both（使用最多）
5)anomation-direction：
mormal
reverse
alternate 来回一直循环
6)animation-iteration-count：（循环次数)
infinite 一直循环
2 循环两次
7)animation-timing-function:（时间曲线）
ease
ease-in 慢 快
ease-out 快 慢
ease-in-out 慢 快 慢
linear 匀速
steps(n) 分n步动
（2） transition
使得某个属性的改变具有过渡效果,用于交互样式
div{
opacity:1;
}
div:hover{
opacity:0.8;
transition-property:opacity; ( none / all / 属性)
transition-duration:2s;
transition-timing-function:linear;
}
（鼠标悬停，透明度慢慢从1变为0.8）
（3）transform
变形
transform-oringin:变形原点
left/right/bottom/top
变形函数
1.rotate() 旋转
单位为度数 deg
rotate()
rotateX()
rotateY()
rotateZ()
2.scale() 缩放
单位为倍数，如果参数为一个值，表示宽高等比例缩放；
如果为两个值，第一个表示x轴上的缩放，第二个为y轴上的缩放
scale(a)
scale(a,b)
scaleX()
scaleY()
3.skew() 拉伸变形
X Y
4.translate() 移动
X Y