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