过渡属性transition,通过一些简单的事件就可以出发。当事件发生时元素的外观或者位置等发生变化时,就会触发过渡效果,以动画的形式过程性的改变。
可以通过以下几个步骤实现但不仅限于:
- 在默认的样式中声明初始状态
- 声明元素的过渡状态
- 在默认样式中添加过渡函数
过渡属性是符合属性:
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;