English 我似乎找不到具有多个属性的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的简写版本。使用所有供应商前缀已经足够enough肿。还扩展了示例代码。
通过在过渡不透明度属性时延迟0.5秒，元素在整个高度过渡期间将完全透明（因此不可见）。因此，您真正看到的唯一一件事就是不透明度发生变化。因此，您将获得与将height属性保留在过渡之外相同的效果：
“过渡：不透明度.5s .5s；”
那是你想要的吗？如果不是，并且您想查看高度转换，则在转换的整个过程中不透明度都不能为零。
如果您有想要以同样的方式过渡几个特定的属性（因为你也有你特别一些属性并不想转型，比方说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>我认为这工作：
element{
transition: all .3s;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
句法：
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;
这是一个简单的例子。这是另一个具有delay属性的对象。
编辑：以前在此处列出的是与的兼容性和已知问题transition。出于可读性原因删除。
底线：使用它。对于所有应用程序而言，此属性的性质均不中断，并且全球兼容性现在远高于94％。
如果仍要确定，请参阅http://caniuse.com/css-transitions
我与这个工作：