CSS过渡与动画

一、过渡

什么是过渡
使得CSS属性值，在一段时间内，平缓变化的一个效果
过渡效果四要素
1.指定过渡属性
指定哪个属性值在变化是需要使用过渡效果
2.指定过渡时间
多长时间内完成过渡效果
3.指定过渡时间的速率
过渡过程中的变化速率(匀速，先快后满，…)
4.指定过渡延迟时间
当用户激发操作后，等待多长时间才激发效果

过渡属性
1.指定过渡属性
属性：transition-property
取值：none、all、property-name
property-name：要使用过渡效果的属性名称
可以设置过渡效果的属性
1.颜色属性
2.取值为数值的属性
3.转换属性
4.渐变属性
5.阴影属性
6.visibility

指定过渡时长
属性：transition-duration
取值：s、ms 为单位的数值
注意：默认值为0s，即没有过渡效果
指定过渡时间速率
属性：transition-timing-function
取值：
1.ease
默认值，先满后快
2.linear
匀速
3.ease-in
慢速开始，快速结束
4.ease-out
快速开始，慢速结束
5.ease-in-out
慢速开始结束，中间先快后慢

过渡延迟
属性：transition-delay
取值：s、ms 为单位的时间
过渡属性简写方式