css3过渡是元素从一种样式逐渐改变为另一种的效果,transition 属性是一个简写属性,用于设置四个过渡属性:
注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果
1、transition-property:规定应用过渡css属性的名称,(瞬间变化的属性不能设置过渡,比如display)
2、transition-duration:定义过渡效果花费的时间,默认是0
3、transition-timing-function:规定过渡效果的时间线,默认是“ease”
1)linear:规定以相同速度开始至结束的过渡效果
2)ease:规定慢速开始,然后变快,然后慢速结束的过渡效果
3)ease-in:规定以慢速开始的过渡效果
4)ease-out:规定以慢速结束的过渡效果
5)ease-in-out:规定以慢速开始和结束的过渡效果
6)cubic-bezier(n,n,n,n):在cubic-bezier函数中定义自己的值,可能的值是0至1之间的数值
4、transition-delay:规定过渡效果何时开始,默认是0
简写形式:transition:width 1s linear 2s(延迟),简写属性,用于在一个属性中设置四个过渡属性