具有多个属性的CSS转换速记格式？

Question

我似乎无法找到多个属性使用CSS转换缩写的正确语法。这样做没有任何效果：

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

我使用JavaScript添加了show类。元素变高并可见，但没有过渡效果。在最新的Chrome、FF和Safari中测试。

我做错了什么？

编辑：只是为了明确，我正在寻找缩小CSS大小的简写版本。拥有所有供应商前缀的代码已经足够庞大了。同时也扩展了示例代码。

- Gregory Bolkenstijn

---

请查看此文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions。 - websymphony

你是否实际改变了高度和不透明度的值？否则它们不会改变。 - yunzen

我对CSS过渡不是很熟悉 - opacity后面的双.5s值是有意义的吗？ - BoltClock

文档没有提供使用多个属性的速记版本的示例。高度从0变为200像素，不透明度从0变到1。第二个.5秒是对不透明度转换的延迟。我想让一个元素在高度增加后再淡入。 - Gregory Bolkenstijn

啊，是的，延迟值。 - BoltClock

Answer 1

语法：

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;

这里有一个简单的示例。还有另一个带延迟属性的示例。

---

编辑：之前列出了关于transition的兼容性和已知问题。为了易读性已删除。

总之，就是使用它吧。这个属性的特性对所有应用程序都不会产生破坏性影响，全球兼容性现在已经超过了94%。

如果您仍然想确保兼容性，请参考http://caniuse.com/css-transitions

- Rémi Breton

---

你试过这个吗？对我不起作用。我也不能使用all属性，因为第二个属性有延迟。 - Gregory Bolkenstijn

使用 "all" 而不是列出特定属性会有性能/内存/其他方面的影响吗？例如，如果我只打算过渡 "background" 和 "color" - 是指明两个属性更好还是只使用 "all" 更好？另外 - 鉴于 IE6-9 不支持过渡，而 IE10 支持未加前缀的过渡 - 是否包括 "ms-transition:" 指令有任何优势/劣势？ - mattstuehler

将所有属性过渡而不仅仅是需要的属性会影响性能，如果有许多元素同时过渡所有属性，可能会造成严重损害。关于ms-transition，既然IE10已经发布，我不知道为什么还有人会使用ms-transition而不是标准的transition。同时拥有两者不会有任何问题，但在过渡效果较多的样式表上，它会使你的CSS文件变得臃肿。更重要的是，文件大小也会受到影响。 - Rémi Breton

我遇到了同样的问题，发现使用"transition: opacity 1s .5s, max-height .5s 0"时无法正常工作，而"transition: opacity 1s .5s, max-height .5s 0s"可以。这是我第一次看到CSS中需要为零值指定单位！ - mlarcher

值得指出的是，使用“all”比指定特定属性要慢。 - Nathan

Answer 2

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

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

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

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}

<p>Hover box for demo</p>
<div class="box"></div>

演示

- Jason

---

这很有用！不仅是因为transition-property覆盖的原因，也因为例如在Webkit中必须在缩写之后指定transition-delay。换句话说，缩写意味着transition-delay为0，而在缩写之前放置一个独立的延迟会将其设置回0。 - duncanwilcox

@duncanwilcox 在现代浏览器中，您可以使用 transition: [props] [duration] [easing] [delay]。 - Jason

我更喜欢这个回答，比被采纳的回答好多了。 - Erutan409

@duncanwilcox，您能澄清一下您所提到的内容吗？如果我在速记符号之前添加了“delay”，那么它不会被应用吗？这似乎并不是这种情况，但我只是想了解您的意思。这是@Jason澄清的吗？“delay”运行正常！ - Gangula

Answer 3

我用这个方法让它工作了：

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

- Haydar C.

---

这正是我在寻找的 - 同时代表多个属性的简写。谢谢！ - Adam Moisa

这是一种简单直接的方法来组合多个转换。但是，如果要转换的属性超过3个，它就开始变得笨重。在这种情况下，@Jason的答案将是正确的方法。虽然需要一点初始理解。 - Gangula

Answer 4

需要注意的一点是，CSS transition 属性本身就是一个简写属性 - 如 MDN Web Docs 中所述：

transition CSS 属性是一个将 transition-property、transition-duration、transition-timing-function 和 transition-delay 属性合并在一起的简写属性。

这个简写属性的理想用法是将单个过渡的各种组成部分结合在一起。如果使用它来组合多个过渡，代码就会变得冗长。

因此，当您在同一元素上有两个及以上不同组成部分的过渡时，最好将它们单独编写，而不是使用 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

- Gangula

Answer 5

通过在过渡不透明度属性上设置0.5秒的延迟，元素在高度过渡期间将完全透明（因此不可见）。因此，您实际上看到的只是不透明度的变化。因此，您将获得与省略转换高度属性相同的效果：

"transition: opacity .5s .5s;"

这符合您的要求吗？如果不是，并且您想看到高度过渡，那么在整个过渡期间不可以将不透明度设置为零。

- J.B.

---

这也行不通，因为在不透明度的转换过程中，高度将保持为0。 - Xesau

Answer 6

这帮助我理解/简化，只需要我需要动画的内容：

// 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' 类中的所有过渡属性（持续时间，过渡时间函数等）

- gav_aus_web

Answer 7

我认为这应该可以工作：

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

- Thomas Lamothe