具有多个属性的 CSS 转换简写？

句法：

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

请注意，如果指定了延迟，则持续时间必须在延迟之前。

单独的转换组合在速记声明中：

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

或者只是将它们全部转换：

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

这是a straightforward example。这是另一个with the delay property。

编辑：之前在此处列出的是有关 transition 的兼容性和已知问题。为便于阅读而删除。

底线：只需使用它。此属性的性质对所有应用程序都没有破坏性，并且现在全球兼容性远高于 94%。

如果您仍想确定，请参阅 http://caniuse.com/css-transitions

---

如果您有几个特定的属性要以相同的方式进行转换（因为您也有一些您特别不想想要转换的属性，例如 opacity），另一种选择是做某事像这样（为简洁起见省略了前缀）：

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

第二个声明覆盖了它上面的简写声明中的 all 并使得（偶尔）更简洁的代码。

/* 为简洁省略前缀 */ .box { height: 100px;宽度：100px；背景：红色；盒子阴影：红色 0 0 5px 1px；过渡：全部 500ms 缓动； /*注意：不过渡宽度 */ transition-property: height, background, box-shadow; } .box:hover { 高度：50px;宽度：50px；盒子阴影：蓝色 0 0 10px 3px；背景：蓝色； }

演示的悬停框

Demo

---

我使它与这个一起工作：

.element {
   transition: height 3s ease-out, width 5s ease-in;
}

---

需要注意的重要一点是 CSS transition 属性本身是一种简写形式 - 如 MDN Web Docs 中所述：

transition CSS 属性是transition-property、transition-duration、transition-timing-function 和transition-delay 的简写属性。

这种速记的理想用法是组合单个转换的各种 Constituent properties。如果这用于组合多个转换，它将开始变得笨拙。

因此，当您在同一元素上有超过 2 个具有不同组成属性的转换时，单独编写它们而不是使用 transition 简写会变得更容易。例如：

这是一个元素上多个转换的简写版本（选项 1）：

transition: transform 0.5s ease-in-out, box-shadow 0.2s ease-out, filter 0.1s ease-out, color 0.25s ease-in 0.2s;

如您所见，这变得笨拙且难以可视化。可以像这样应用相同的 CSS（选项 2）：

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s, 0.2s, 0.2s, 0.25s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s

当然，最终这一切都归结为您对输入和维护源代码的偏好。但我个人更喜欢第二种选择。

小费：

使用它的另一个好处是，如果一个成分属性对于所有转换都相同，则不需要多次提及它。例如，在上面的示例中，如果所有的 transition-duration 都相同（0.5s），您可以这样写：

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s

---

通过在转换 opacity 属性时有 0.5 秒的延迟，元素将在其高度转换的整个过程中完全透明（因此不可见）。因此，您实际上会看到的唯一一件事就是不透明度发生了变化。因此，您将获得与将 height 属性排除在过渡之外的相同效果：

“过渡：不透明度 .5s .5s；”

那是你想要的吗？如果不是，并且您想查看高度过渡，则在过渡的整个过程中，不透明度都不能为零。

---

这有助于我理解/简化，只有我需要动画：

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {
  max-width: 0vw;
  opacity: 0;

  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;

  &:hover {
    max-width: 100vw;
    opacity: 1;

    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

~ 这适用于“.base”类中的所有过渡属性（持续时间、过渡定时功能等）

---

我认为这应该有效：

.element {
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
   transition: all .3s;
}

---