css3 transition用法（很详细）

admin管理员组

文章数量:1794759

css3 transition用法（很详细）

解释

transition（ CSS 属性）是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。 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; 参考地址：MDN、菜鸟教程

本文标签： 详细Transition