大家好，又见面了，我是你们的朋友全栈君。
解释
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、菜鸟教程
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/159180.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
