持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第25天，点击查看活动详情
-
过渡属性
-
动画效果：CSS3出现之前，前端一般使用flash动画或JavaScript制作动画
-
属性名：transition
-
作用：在不使用flash动画或JavaScript的情况下，使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态（我们用A和B代指），那么A和B之间就可以实现平滑的过渡的动画效果。为了方便看效果，我们使用:hover切换状态
-
语法：transition：过渡的属性 过渡时间 运动曲线 延时时间；
- transition属性：简写属性，用于在一个属性中设置四个过渡属性
- transition-property：规定应用过渡的CSS属性的名称
- transition=duration：定义过渡效果花费的时间，默认是0
- transition-timing-function：规定过渡效果的时间曲线，默认是“ease”
- transition-delay：规定过渡效果何时开始，默认是0
-
-
transition-property过渡属性
-
none表示没有属性过渡；all表示所有变化的属性都过渡；属性名使用具体的属性名，多个属性名中间逗号分隔
-
时间：过渡时间：以s秒为单位
- 延时时间：以s秒为单位，0s也必须加单位
- linear：规定以相同速度开始至结束的过渡位置
- ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
- ease-in：规定以慢速开始的过渡效果
- ease-out：规定以慢速结束的过渡效果
- ease-in-out：规定以慢速开始和结束的过渡效果
- cubic-bezier（x1，y1，x2，y2）：在cubic-bezier函数中定义自己的值，x1、x2取是0至1之间的数值，y1、y2取值任意，四个数值表示拉扯的点的两个坐标
- 延时时间：以s秒为单位，0s也必须加单位
-
-
贝赛尔曲线：起始结束慢，中间快的数值(0.9,0.17,0.29,0.95)
-
一般过渡属性设置数值
- transition: all 2s cubic-bezier(0.9,0.17,0.29,0.95) 0s;
-
浏览器兼容
-
IE10、Firefox、Chrome以及Opera支持transition属性；Safari需要前缀-webkit-
-
注意：IE9以及更早的版本，不支持transition属性
-
-
