我似乎找不到具有多个属性的 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。所有的供应商前缀都已经够臃肿了。还扩展了示例代码。
句法：
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它上面的简写声明中的 并且（偶尔）使代码更简洁。
/* 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: height 3s ease-out, width 5s ease-in;
}
需要注意的重要一点是 CSStransition属性本身是一种速记 -正如MDN Web Docs中所述：
transitionCSS 属性是transition-property、transition-duration、transition-timing-function和的简写属性transition-delay。
这种速记的理想用途是结合单个转换的各种成分属性。如果这用于组合多个转换，它将开始变得笨拙。
因此，当您在同一元素上有超过 2 个具有不同组成属性的转换时，单独编写它们而不是使用transition速记变得更容易。例如：
这是一个元素上多个转换的简写版本（选项 1）：
transition: transform 0.5s ease-in-out, box-shadow 0.2s ease-out, filter 0.1s ease-out, color 0.25s ease-in 0.2s;
如您所见，这变得笨拙且难以可视化。
可以像这样应用相同的 CSS（选项 2）：
transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s, 0.2s, 0.2s, 0.25s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s
当然，最终这一切都归结为您对输入和维护源代码的偏好。但我个人更喜欢第二种选择。
使用它的另一个好处是，如果一个成分属性对于所有转换都相同，则不需要多次提及它。例如，在上面的例子中，如果所有的transition-duration都是相同的（0.5s），你可以这样写：
transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s
通过在转换 opacity 属性时有 0.5 秒的延迟，元素将在其高度转换的整个过程中完全透明（因此不可见）。因此，您实际上会看到的唯一一件事就是不透明度发生了变化。因此，您将获得与将 height 属性排除在过渡之外的相同效果：
“过渡：不透明度 .5s .5s；”
那是你想要的吗？如果不是，并且您想查看高度过渡，则在过渡的整个过程中，不透明度都不能为零。
这有助于我理解/简化，只有我需要动画：
// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}
.base {
max-width: 0vw;
opacity: 0;
transition-property: max-width, opacity; // relative order
transition-duration: 2s, 4s; // effects relatively ordered animation properties
transition-delay: 6s; // effects delay of all animation properties
animation-timing-function: ease;
&:hover {
max-width: 100vw;
opacity: 1;
transition-duration: 5s; // effects duration of all aniomation properties
transition-delay: 2s, 7s; // effects relatively ordered animation properties
}
}
~ 这适用于“.base”类中的所有过渡属性（持续时间、过渡定时功能等）
我认为这应该有效：
.element {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}