transition-property指定过渡的CSS属性，transition-duration设置过渡时间。例如按钮hover时背景色0.3秒变深、宽度0.6秒拉长，使样式变化更平滑。
在CSS中，transition-property 和 transition-duration 是控制元素过渡效果的关键属性。它们通常配合使用，让样式变化更加平滑自然，比如鼠标悬停时的颜色渐变、宽度伸缩等。
transition-property：指定要过渡的CSS属性
这个属性用来定义哪个CSS属性需要添加过渡动画。你可以指定一个或多个属性，也可以使用 all 表示所有可动画的属性都参与过渡。
常见值包括：width、height、opacity、color、background-color、transform 等 例如只对宽度变化添加过渡：transition-property: width; 若想同时对多个属性生效，可用逗号分隔：transition-property: opacity, transform; 使用 all 要谨慎，可能影响性能或导致意外动画
transition-duration：设置过渡持续时间
它决定过渡动画执行的时间长度，单位可以是秒（s）或毫秒（ms）。
例如设置0.5秒的过渡时间：transition-duration: 0.5s; 如果持续时间为0，则没有动画效果，立即完成变化 当设置多个值时，分别对应 transition-property 中列出的属性：transition-property: width, opacity;transition-duration: 1s, 0.3s;
实际应用示例
下面是一个按钮 hover 效果的例子：
Revid AI
AI短视频生成平台
96 查看详情
立即学习“前端免费学习笔记（深入）”；
.button { background-color: #007bff; width: 100px; padding: 10px; text-align: center; color: white; transition-property: background-color, width; transition-duration: 0.3s, 0.6s;}.button:hover { background-color: #0056b3; width: 120px;}
鼠标移上时，背景色在0.3秒内变深，宽度在0.6秒内缓慢拉长。
基本上就这些。合理使用这两个属性，可以让界面交互更柔和、用户体验更好。
以上就是css属性transition-property与transition-duration应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1041497.html
微信扫一扫 
支付宝扫一扫 
