CSS 转换持续时间

CSS转换持续时间是指CSS3动画和过渡效果的持续时间。在CSS中，你可以使用许多不同的单位来定义持续时间，如秒（s）、毫秒（ms）等。本文将介绍CSS转换持续时间的详细信息。

基本语法

CSS转换持续时间可以使用transition-duration属性来定义。例如：

/* 持续0.5秒 */
transition-duration: 0.5s;

支持的单位

以下单位可以用于定义CSS转换持续时间：

• 秒（s）
• 毫秒（ms）

例如：

/* 持续1.5秒 */
transition-duration: 1.5s;

/* 持续500毫秒 */
transition-duration: 500ms;

多个属性的持续时间

如果你想将不同的属性设置为不同的持续时间，你可以通过使用transition-property和transition-duration属性来实现。例如：

/* 当宽度发生变化时，持续0.5秒 */
transition-property: width;
transition-duration: 0.5s;

/* 当颜色发生变化时，持续1秒 */
transition-property: color;
transition-duration: 1s;

动画的持续时间

CSS动画的持续时间可以使用animation-duration属性来设置。例如：

/* 持续3秒 */
animation-duration: 3s;

结论

CSS转换持续时间是指CSS3动画和过渡效果的持续时间，它可以使用秒或毫秒作为单位进行定义。您还可以使用transition-property和transition-duration属性来对多个属性设置不同的持续时间。对于CSS动画，您可以使用animation-duration属性来设置持续时间。

参考资料：MDN Web Docs