CSS-transition

过渡属性transition,通过一些简单的事件就可以出发。当事件发生时元素的外观或者位置等发生变化时，就会触发过渡效果，以动画的形式过程性的改变。
可以通过以下几个步骤实现但不仅限于：

1. 在默认的样式中声明初始状态
2. 声明元素的过渡状态
3. 在默认样式中添加过渡函数

过渡属性是符合属性：

transition-property：指定过渡状态的CSS属性
transition-duration：过渡所需时间，也就是动画时长。
transition-timing-function: 过渡函数。

• ease 速度先快后慢
• linear 匀速
• ease-in 速度越来越快
• ease-out 速度越来越慢
• ease-in-out 先加速再减速

transition-delay: 指定动画从触发到开始的延迟时间

合并写法

-webkit-transition: all 0.5s ease-in-out 0.1s;
-moz-transition: all 0.5s ease-in-out 0.1s;
-ms-transition: all 0.5s ease-in-out 0.1s;
-o-transition: all 0.5s ease-in-out 0.1s;
transition: all 0.5s ease-in-out 0.1s;