H5中的过渡、动画

transition、animation我的理解分别是：过渡、动画。因为两者的功能较为接近，所以在这我主要整理transition和animation的使用方法。

 

Transition

1.定义和用法

transition的使用在于让元素的变化有一个过渡的过程，过渡效果执行完毕之后，默认会还原到原始状态，即可以指定状态变化所需要的时间。transition是一个简写属性，用于设置四个过渡属性：

transition-property：规定设置过渡效果的css属性名称

none 没有属性会获得过渡效果all 所有属性都获得过渡效果property 定义应用过渡效果的css属性名称列表，列表以逗号分隔

transition-duration：规定完成过渡效果需要多少秒或毫秒必须设置，否则时长为0,则不产生过渡效果。

transition-timing-function：规定过渡效果的速度曲线，默认值为：ease

linear 匀速（等于 cubic-bezier(0,0,1,1)）

ease 先加速后减速（等于 cubic-bezier(0.25,0.1,0.25,1)）

ease-in 加速（等于 cubic-bezier(0.42,0,1,1)）

ease-out 减速（等于 cubic-bezier(0,0,0.58,1)）

ease-in-out 等同类似于ease（等于 cubic-bezier(0.42,0,0.58,1)）

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-del