css属性transition-property与transition-duration应用-css教程-PHP中文网

css属性transition-property与transition-duration应用

P粉602998670

发布： 2025-09-30 15:16:02

原创

264人浏览过

transition-property指定过渡的CSS属性，transition-duration设置过渡时间。例如按钮hover时背景色0.3秒变深、宽度0.6秒拉长，使样式变化更平滑。

css属性transition-property与transition-duration应用

在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 效果的例子：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

立即学习“前端免费学习笔记（深入）”；

.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应用的详细内容，更多请关注php中文网其它相关文章！