在 CSS 中的速记转换中提到属性名称有什么意义

Question

我不明白为什么有些人在速记转换中提到属性名称，而如果他们不这样做就会一样。

假设有一个按钮我想改变它的背景

.btn{
  padding: 10px;
  border-radius: 5px;
  background: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  transition: .3s;
}

.btn:hover{
  background: #ddd;
}

transition: background .3s; 和 transition: .3s; 有相同的结果，但为什么有人提到 background 呢？会不会影响性能？

Answer 1

如果他们不这样做，那将是一样的。

不，不一样。一个简单的例子：

.box {
  background:red;
  display:inline-block;
  width:100px;
  height:100px;
  transform:scale(1);
}

.box:hover {
  transform:scale(1.5);
  background:green;
}

<div class="box" style="transition:0.3s;"></div>

<div class="box" style="transition:background 0.3s;"></div>

如果我们考虑背景，它们只有相同的结果，但第一个涵盖了所有属性，并且在许多情况下，我们不需要转换所有属性，而是需要转换特定属性。

相关：What is the difference between transition-all and transition in TailwindCSS