具有多个属性的 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 的速记版本。它已经足够臃肿了所有的供应商前缀。还扩展了示例代码。

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;

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

---

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

底线:只是使用它。此属性的性质对于所有应用程序都是不间断的，并且全局兼容性现在远高于 94%。

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