对于具有多个属性的CSS transition shorthand，我似乎找不到正确的语法.这没什么用:
.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.它已经足够臃肿了，有所有的供应商前缀.还扩展了示例代码.
语法:
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.
这里之前列出的Edit:是关于transition的兼容性和已知问题.删除以提高可读性.
底线是:只要使用它就行了.此属性的性质对所有应用程序都是不间断的，全球兼容性现在远高于94%.
如果您仍然想确定，请参阅http://caniuse.com/css-transitions