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

Answer 2

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

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

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

Demo

Answer 3

我用这个：

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

Answer 4

通过在转换不透明度属性时延迟.5s，元素在其高度转换的整个时间内将是完全透明的（因此是不可见的）。所以你唯一能看到的就是不透明度的变化。因此，您将获得与将高度属性保留在转换之外相同的效果：

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

那是你想要的吗？如果没有，并且您希望看到高度转换，则在转换的整个过程中不能具有零不透明度。

Answer 5

我认为这个工作：

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