transition的动画时间由transition-duration属性设置，可在transition简写中直接指定，单位支持秒（s）和毫秒（ms），可为不同属性用逗号分隔设置不同时间，推荐使用简写形式定义过渡效果。
在 CSS 中，transition 的动画时间是通过 transition-duration 属性来设置的。它定义了过渡效果从开始到结束所花费的时间。
基本语法
你可以直接在 transition 简写属性中指定时间，也可以单独使用 transition-duration。
/* 单独设置持续时间 */transition-duration: 0.5s;/ 或者在 transition 简写中设置 /transition: width 0.5s ease;
单位说明
时间单位支持秒（s）和毫秒（ms）：
0.3s 表示 300 毫秒500ms 等同于 0.5s
多个属性不同持续时间
如果需要为不同属性设置不同的动画时间，可以用逗号分隔：
立即学习“前端免费学习笔记（深入）”；
稿定抠图
AI自动消除图片背景
76 查看详情
transition-property: width, opacity;transition-duration: 1s, 0.3s;
这表示 width 过渡持续 1 秒，opacity 只用 0.3 秒。
常用写法（推荐）
通常使用简写形式更清晰：
/* 属性 过渡时间 缓动函数 延迟 */transition: background-color 0.3s ease-in-out 0.1s;/ 所有可过渡属性都应用相同过渡 /transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
基本上就这些。只要设置好 transition-duration 或在 transition 里指定时间，就能控制动画快慢了。不复杂但容易忽略细节，比如单位写错或漏掉属性名。
以上就是css transition如何设置动画时间的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1026336.html
微信扫一扫 
支付宝扫一扫 
