CSS过渡动画设置详解

本文深入解析了 CSS transition 动画中控制时间的核心属性 `transition-duration`，详解其在简写语法（如 `transition: background-color 0.3s ease`）和单独声明中的用法，支持秒（s）与毫秒（ms）单位，并支持为不同属性（如 width、opacity）分别指定差异化持续时间；同时穿插 timing-function、delay 等关联属性的协同逻辑，辅以按钮悬停等实用示例，帮助开发者精准掌控动画节奏——原来让页面动得恰到好处，只需几行简洁而富有表现力的 CSS。

在 CSS 中，transition 的动画时间是通过 transition-duration 属性来设置的。它定义了过渡效果从开始到结束所花费的时间。

基本语法

你可以直接在 transition 简写属性中指定时间，也可以单独使用 transition-duration。

/* 单独设置持续时间 */
transition-duration: 0.5s;
<p>/<em> 或者在 transition 简写中设置 </em>/
transition: width 0.5s ease;</p>

单位说明

时间单位支持秒（s）和毫秒（ms）：

• 0.3s 表示 300 毫秒
• 500ms 等同于 0.5s

多个属性不同持续时间

如果需要为不同属性设置不同的动画时间，可以用逗号分隔：

transition-property: width, opacity;
transition-duration: 1s, 0.3s;

这表示 width 过渡持续 1 秒，opacity 只用 0.3 秒。

常用写法（推荐）

通常使用简写形式更清晰：

/* 属性 过渡时间 缓动函数 延迟 */
transition: background-color 0.3s ease-in-out 0.1s;
<p>/<em> 所有可过渡属性都应用相同过渡 </em>/
transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);</p>

基本上就这些。只要设置好 transition-duration 或在 transition 里指定时间，就能控制动画快慢了。不复杂但容易忽略细节，比如单位写错或漏掉属性名。

文中关于动画时间的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS过渡动画设置详解》文章吧，也可关注golang学习网公众号了解相关技术文章。