具有多个属性的 CSS 过渡速记？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9670075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS transition shorthand with multiple properties?
提问by Gregory Bolkenstijn
I can't seem to find the correct syntax for the CSS transition shorthandwith multiple properties. This doesn't do anything:
我似乎无法找到具有多个属性的 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;
}
I add the show class with javascript. The element becomes higher and visible, it just doesn't transition. Testing in latest Chrome, FF and Safari.
我用 javascript 添加了 show 类。元素变得更高和可见，它只是不过渡。在最新的 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. It's bloated enough with all the vendor prefixes. Also expanded the example code.
编辑：为了清楚起见，我正在寻找速记版本来缩小我的 CSS。所有供应商前缀都足够臃肿。还扩展了示例代码。
回答by Rémi Breton
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. Removed for readability.
编辑：之前在此处列出的是有关transition. 删除以提高可读性。
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
回答by Jason
If you have several specific properties that you want to transition in the same way (because you also have some properties you specifically don'twant 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 allin 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>回答by AhbapAldirmaz
I that work with this :
我与此合作：
element{
transition : height 3s ease-out, width 5s ease-in;
}
回答by J.B.
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. 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 :
通过在转换 opacity 属性时有 0.5 秒的延迟，元素将在其高度转换的整个过程中完全透明（因此不可见）。所以你唯一能真正看到的是不透明度的变化。因此，您将获得与将 height 属性排除在过渡之外的效果相同：
"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.
这就是你想要的吗？如果没有，并且您想看到高度过渡，则在过渡的整个过程中，不透明度不能为零。
回答by gav_aus_web
This helped me understand / streamline, only what I needed to animate:
这帮助我理解/简化，只有我需要动画的内容：
// 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
}
}
~ This applies for all transition properties (duration, transition-timing-function, etc.) within the '.base' class
~ 这适用于“.base”类中的所有过渡属性（持续时间、过渡时间函数等）
回答by Thomas Lamothe
I think that work with this :
我认为这与此有关：
element{
transition: all .3s;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
