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）。

AppMall应用商店

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

56

查看详情

• 例如设置0.5秒的过渡时间：
  width0
• 如果持续时间为0，则没有动画效果，立即完成变化
• 当设置多个值时，分别对应 width1 中列出的属性：
  width2
  width3

实际应用示例

下面是一个按钮 hover 效果的例子：

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

 .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 css属性 css Property background transform transition