具有多个属性的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的简写版本。使用所有供应商前缀已经足够enough肿。还扩展了示例代码。

Answer 1

如果您有想要以同样的方式过渡几个特定的属性（因为你也有你特别一些属性并不想转型，比方说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>

Answer 2

我与这个工作：

element{

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

}