# 过渡和动画
使用过渡和动画，可以让css属性变化更加丝滑
过渡和动画无法对所有的CSS属性产生影响，能够产生影响的只有数值类属性，例如：颜色、宽高、字体大小等等
# 过渡
transition: 过渡属性 持续时间 过渡函数 过渡延迟
1
过渡属性
针对哪个css属性应用过渡。例如填写
transform，则表示仅针对transform属性应用过渡。若填写
all或不填写，则表示针对所有css属性都应用过渡持续时间
css属性变化所持续的时间，需要带上单位。例如
3s表示3秒，0.5s或500ms均表示500毫秒过渡函数
本质是css属性变化的贝塞尔曲线函数，通常直接使用预设值：
ease-in-out：平滑开始，平滑结束linear：线性变化ease-in：仅平滑开始ease-out：仅平滑结束过渡延迟
书写规则和持续时间一样，表示过渡效果延迟多久后触发，不填则无延迟
在JS中，可以监听元素的transitionstart和transitionend事件，从而在过渡开始和过渡结束时做一些别的事情
# 动画
动画的本质是预先定义的一套css变化规则，然后给该规则取个名字
然后，其他元素即可使用这样的规则：
animation: 规则名 持续时间;
1
在应用规则时，还可以指定更多的信息
animation: 规则名 持续时间 重复次数 时间函数 动画方向 延迟时间
1
一些细节：
- 定义规则时，
0%可以书写为from - 定义规则时，
100%可以书写为to - 重复次数为
infinite时，表示无限重复 - 动画方向为
alternate时，表示交替反向，第1次正向，第2次反向，第3次正向，第4次方向，以此类推
在JS中，可以监听元素的animationstart和animationnend事件，从而在过渡开始和过渡结束时做一些别的事情