大家好，又见面了，我是你们的朋友全栈君。
解释
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.net/159180.html原文链接：https://javaforall.net
