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、菜鸟教程
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/159180.html原文链接：https://javaforall.cn
腾讯云开发者
