CSS3动画过渡

开发工具与关键技术：DW CSS3的动漫过渡
作者：李波
撰写时间：2019.1.19号
动画过渡 transition
transition是一个复合属性，包含一下几个子属性：
 transition-property：指定过渡或动态模拟的CSS属性；
 transition-duration：指定过渡完成所需的时间；
 transition-timing-function：指定过渡函数；
 transition-delay：指定开始出现的延迟时间；
这里说下缓冲函数：transition-timing-function 她的过度效果有以下几种：
Ease: 默认值，元素样式从初始状态过渡到终止状态由快到慢，逐渐变慢
Linear:元素样式从初始状态过渡到终止状态速度恒速
Ease-in:元素样式从初始状态过渡到终止状态时，速度越来越快
Ease-out：从初始到终止越来越慢
Ease-in-out：从初始到终止，先加速在减速
我将transition: width 0.5s ease-in 0.18s;通过设置伪类将其触发让图片慢慢展开，代码如下：