css3transition⽤法(很详细)
解释
transition( CSS 属性)是 transition-property,transition-duration,transition-timing-function 和 transition-delay 的⼀个简写属性。transition用法搭配
transition可以为⼀个元素在不同状态之间切换的时候定义不同的过渡效果。
以下是属性解释。
值描述
transition-property指定CSS属性的name,transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function指定transition效果的转速曲线
transition-delay定义transition效果开始的时候
以下列出了transition常⽤的⼏种。
1. transition: property name | duration
举例: transition: width .8s;
表⽰width属性变化时 过渡时间为0.8s
2. transition: property name | duration | delay
举例:transition: width .8s .5s;
表⽰width属性变化时 过渡时间为0.8s 且延迟0.5s之后执⾏宽度变化
3. transition: property name | duration | timing function
举例:transition: width .8s ease-in-out;
使⽤了转速曲线,以慢速开始和结束的过渡效果。
time function可能的值有以下。
值描述
linear规定以相同速度开始⾄结束的过渡效果
ease规定慢速开始,然后变快,然后慢速结束的过渡效果
ease-in规定以慢速开始的过渡效果
ease-out规定以慢速结束的过渡效果
ease-in-out规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n)在cubic-bezier函数中定义⾃⼰的值。可能的值是0⾄1之间的数值
4. transition: property name | duration | timing function | delay
举例: transition: width .8s ease 1s;
表⽰宽度变化时,过渡时间为0.8s, ease表⽰规定慢速开始,然后变快,然后慢速结束的过渡效果,延迟1s执⾏宽度变化
5. 多个属性⽤逗号隔开
transition: height .8s, color .8s;
6. 应⽤于所有属性
transition: all 0.5s ease-out;
7. 其他
/* Global values */ transition: inherit; transition: initial; transition: unset;
参考地址:、