前端基础学习笔记 过渡、动画和变换

过渡 transition

让属性变化成为一个持续一段时间的过程，而不是立即生效的

可能的属性：

执行变换的属性： transition-property,  
变换延续的时间： transition-duration,  过渡延迟的时间：transition-delay

在延续时间段，变换的速率变化 transition-timing-function,  
       linear： 匀速 
       ease：（默认值） 慢快慢 
       easein： 慢入 
       easeout： 慢出 
       easeinout： 慢入慢出 
       cubicbezier 贝塞尔曲线（ x1, y1, x2, y2 ）

而我们通常会用简写方式（一般直接用这个）：

transition:width 2s, height 2s, background-color 2s, transform 2s;

多个属性过渡的时候 用逗号隔开！ 
display不支持过渡    淡入淡出最好用opacity

动画 animation

可以为从一个CSS样式配置到另一个CSS样式配置的动画制作动画。动画包含两个组件，一个描述CSS动画的样式和一组指示动画样式的开始和结束状态的关键帧，以及可能的中间路标。

可能的值