动画&过渡

”过渡“transition

功能：在规定的时间内，从一个值变化到另一个值的过程

**transition-property:**过渡的属性

**transition-duration:**过度的时间

**transition(**缩写)

例：transition: all linear 2000ms;

可以过渡的属性：颜色、尺寸、透明度

进行尺寸过渡时起始值和结束值不能auto

过渡效果延迟显示（transition-delay:时间;）

transition-delay: 0.5s;

transition-timing-function（过渡速度）

linear:匀速过度

ease-in:由慢到快

ease-out:由快到慢

ease-in-out:由慢到快再到慢

动画

动画定义（@keyframes 自定义）

第一步定义动画

书写格式：@keyframes动画名称（动画效果）

动画效果：百分率{声明块}（注：百分率是声明块动画的时间）

第一条是动画的起始效果

最后一条是动画的结束效果

第一条和最后一条相同时课省略最后一条

第二部运用动画

书写格式：

animation：动画名称 动