过渡效果的持续时间由transition-duration属性设置，单位为秒（s）或毫秒（ms），默认值为0s；可单独使用如transition-duration: 0.3s，或在transition简写中指定第二个值，如transition: width 0.4s ease；支持多个属性不同时间，通过逗号分隔，如transition-duration: 0.5s, 0.2s。
在CSS中，过渡效果的持续时间通过 transition-duration 属性来设置，它定义了属性变化所花费的时间。这个时间决定了动画从开始到结束的快慢。
默认值是 0s，意味着没有过渡，属性立即变化。
如果你只想设置持续时间，可以这样写：
transition-duration: 0.3s;这会让元素在状态改变时，用0.3秒完成过渡。
立即学习“前端免费学习笔记（深入）”；
更常见的做法是使用简写属性 transition，它可以同时设置属性名、持续时间、延迟和缓动函数：
其中第二个值就是 duration，比如上面的 0.4s 和 0.6s。
如果想让不同属性有不同的过渡时间，可以用逗号分隔：
transition-property: width, opacity;这样 width 变化用0.5秒，opacity 只用0.2秒。
基本上就这些。只要指定好时间单位，就能控制过渡快慢，让界面更自然流畅。不复杂但容易忽略细节。
以上就是css过渡持续时间duration如何设置的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
436
