transition的动画时间由transition-duration属性设置，可在transition简写中直接指定，单位支持秒（s）和毫秒（ms），可为不同属性用逗号分隔设置不同时间，推荐使用简写形式定义过渡效果。
在 CSS 中，transition 的动画时间是通过 transition-duration 属性来设置的。它定义了过渡效果从开始到结束所花费的时间。
你可以直接在 transition 简写属性中指定时间，也可以单独使用 transition-duration。
/* 单独设置持续时间 */ transition-duration: 0.5s; <p>/<em> 或者在 transition 简写中设置 </em>/ transition: width 0.5s ease;</p>
时间单位支持秒（s）和毫秒（ms）：
如果需要为不同属性设置不同的动画时间，可以用逗号分隔：
立即学习“前端免费学习笔记（深入）”；
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 transition如何设置动画时间的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
924
