具有多个属性的CSS过渡速记？
我似乎无法找到具有多个属性的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 class。 元素变得更高和可见，它只是不转换。 在最新的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;
这是一个简单的例子。 这是另一个延迟属性。
编辑：此前列出的是transition的兼容性和已知问题。 为了便于阅读，删除。
底线：只用它。 此属性的性质对于所有应用程序而言都不会突破，兼容性现在已经远高于全球94％。
如果您仍想确定，请参阅http://caniuse.com/css-transitions
如果你有几个特定的属性需要以相同的方式转换（因为你也有一些你不想转换的属性，比如说opacity ），另一个选择就是做这样的事情（前缀为了简洁起见而省略）：
.myclass {
transition: all 200ms ease;
transition-property: box-shadow, height, width, background, font-size;
}
第二个声明覆盖了它上面的速记声明中的all ，并且（偶尔）会提供更简洁的代码。
演示
通过在转换不透明属性时延迟0.5秒，元素在其高度转变的整个过程中将是完全透明的（并因此不可见）。 所以你唯一会看到的是不透明度的变化。 所以你会得到和高度属性离开转换一样的效果：
“过渡：不透明.5s。5s;”
那是你想要的吗？ 如果没有，并且您希望看到高度过渡，那么您在转换过程中不会出现零不透明度。
链接地址: http://www.djcxy.com/p/27413.html