CSS过渡速记有多个属性？

本文翻译自：CSS transition shorthand with multiple properties?

I can't seem to find the correct syntax for the CSS transition shorthand with multiple properties. 我似乎找不到具有多个属性的CSS转换速记的正确语法。 This doesn't do anything: 这没有做任何事情：

.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;
}

I add the show class with javascript. 我用javascript添加show类。 The element becomes higher and visible, it just doesn't transition. 元素变得更高且可见，它不会过渡。 Testing in latest Chrome, FF and Safari. 在最新的Chrome，FF和Safari中进行测试。

What am I doing wrong? 我究竟做错了什么？

EDIT: Just to be clear, I'm looking for the shorthand version to scale my CSS down. 编辑：为了清楚，我正在寻找速记版本来缩小我的CSS。 It's bloated enough with all the vendor prefixes. 所有供应商前缀都足够臃肿。 Also expanded the example code. 还扩展了示例代码。

---

#1楼

参考：https://stackoom.com/question/eZcx/CSS过渡速记有多个属性

---

#2楼

If you have several specific properties that you want to transition in the same way (because you also have some properties you specifically don't want to transition, say opacity ), another option is to do something like this (prefixes omitted for brevity): 如果您有想要以同样的方式（因为你也有一些属性，你特别不希望转型，说要变革的若干特定属性opacity ），另一种选择是做这样的事情（略去了前缀）：

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

The second declaration overrides the all in the shorthand declaration above it and makes for (occasionally) more concise code. 第二个声明复盖了它上面的简写声明中的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> 

Demo 演示

---

#3楼

By having the .5s delay on transitioning the opacity property, the element will be completely transparent (and thus invisible) the whole time its height is transitioning. 通过在转换不透明度属性时延迟.5s，元素在其高度转换的整个时间内将是完全透明的（因此是不可见的）。 So the only thing you will actually see is the opacity changing. 所以你唯一能看到的就是不透明度的变化。 So you will get the same effect as leaving the height property out of the transition : 因此，您将获得与将高度属性保留在转换之外相同的效果：

"transition: opacity .5s .5s;" “过渡：不透明度.5s .5s;”

Is that what you're wanting? 那是你想要的吗？ If not, and you're wanting to see the height transition, you can't have an opacity of zero during the whole time that it's transitioning. 如果没有，并且您希望看到高度转换，则在转换的整个过程中不能具有零不透明度。

---

#4楼

I think that work with this : 我认为这个工作：

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;

---

#5楼

I that work with this : 我用这个：

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

---

#6楼

Syntax: 句法：

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

Note that the duration must come before the delay, if the latter is specified. 请注意，如果指定了后者，则持续时间必须在延迟之前。

Individual transitions combined in shorthand declarations: 个人转换结合在速记声明中：

-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;

Or just transition them all: 或者只是将它们全部转换：

-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;

Here is a straightforward example . 这是一个简单的例子 。 Here is another one with the delay property . 这是另一个具有延迟属性的 。

---

Edit: previously listed here were the compatibilities and known issues regarding transition . 编辑：此前列出的是有关transition的兼容性和已知问题。 Removed for readability. 删除以方便阅读。

Bottom-line: just use it. 底线：只需使用它。 The nature of this property is non-breaking for all applications and compatibility is now well above 94% globally. 对于所有应用程序，此属性的性质不会中断，并且全球的兼容性现在远高于94％。

If you still want to be sure, refer to http://caniuse.com/css-transitions 如果您仍想确定，请参阅http://caniuse.com/css-transitions