blocks|key|2899808|text|语法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2899809|transition:+<property>+%7C%7C+<duration>+%7C%7C+<timing-function>+%7C%7C+<delay>+[,+...];|code-block|syntax|javascript|2899810|请注意，如果指定了延迟，则持续时间必须在延迟之前。|2899811|在速记声明中组合的单个转换：|2899812|-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;|2899813|或者只是将它们全部转换：|2899814|-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;|2899815|这是a+straightforward+example。这是另一个with+the+delay+property。|offset|length|2899816|2899817|编辑：之前在这里列出了有关transition的兼容性和已知问题。删除以提高可读性。|style|BOLD|CODE|2899818|底线:使用它就行了。此属性的性质对所有应用程序都是不间断的，并且全球兼容性现在远高于94%25。|2899819|如果您仍然想要确定，请参阅http://caniuse.com/css-transitions|2899820|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/remibreton/qAxnK/18/|1|http://jsfiddle.net/remibreton/qAxnK/19/|2|http://caniuse.com/css-transitions^0|0|0|0|0|0|0|0|2|P|0|X|N|1|0|0|0|3|D|A|0|0|D|Y|2|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1H|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1I|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1J|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|1K|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|1L|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|1M|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|1N|8|@]|9|@$S|1O|T|1P|1|1Q]|$S|1R|T|1S|1|1T]]|A|$]]|$1|U|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1V|8|@$S|1W|T|1X|X|Y]|$S|1Y|T|1Z|X|Z]]|9|@]|A|$]]|$1|10|3|11|5|6|7|20|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|21|8|@]|9|@$S|22|T|23|1|24]]|A|$]]|$1|14|3|-4|5|6|7|25|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]|1C|$5|17|18|19|A|$1A|1D]]|1E|$5|17|18|19|A|$1A|1F]]]]

Syntax:

<pre><code>transition: &lt;property&gt; || &lt;duration&gt; || &lt;timing-function&gt; || &lt;delay&gt; [, ...];
</code></pre>

Note that the duration must come before the delay, if the latter is specified.

Individual transitions combined in shorthand declarations:

<pre><code>-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;
</code></pre>

Or just transition them all:

<pre><code>-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;
</code></pre>

Here is <a href="http://jsfiddle.net/remibreton/qAxnK/18/" rel="noreferrer">a straightforward example</a>. Here is another one <a href="http://jsfiddle.net/remibreton/qAxnK/19/" rel="noreferrer">with the delay property</a>.

<hr>

Edit: previously listed here were the compatibilities and known issues regarding <code>transition</code>. 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.

If you still want to be sure, refer to <a href="http://caniuse.com/css-transitions" rel="noreferrer">http://caniuse.com/css-transitions</a>

blocks|key|238302|text|如果您有几个特定的属性要以相同的方式转换(因为您还有一些特别不想转换的属性，比如opacity)，另一个选择是这样做(为简洁起见，省略了前缀)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|238303|.myclass+{
++++transition:+all+200ms+ease;
++++transition-property:+box-shadow,+height,+width,+background,+font-size;
}|code-block|syntax|javascript|238304|第二个声明覆盖了上面的速记声明中的all，使得(有时)代码更简洁。|238305|​|238306|/*+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;
}|238307|Hover+box+for+demo
<div+class="box"></div>|238308|238309|Demo|238310|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/edelman/sTP4v/^0|14|7|0|0|H|3|0|0|0|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1A|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|S|3|N|5|6|7|1D|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|V|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|W|$X|$5|Y|Z|10|E|$11|12]]]]

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 <code>opacity</code>), another option is to do something like this (prefixes omitted for brevity):
<pre><code>.myclass {
 transition: all 200ms ease;
 transition-property: box-shadow, height, width, background, font-size;
}
</code></pre>
The second declaration overrides the <code>all</code> in the shorthand declaration above it and makes for (occasionally) more concise code.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Hover box for demo&lt;/p&gt;
&lt;div class="box"&gt;&lt;/div&gt;</code></pre>
</div>
</div>

<a href="http://jsfiddle.net/edelman/sTP4v/" rel="nofollow noreferrer">Demo</a>

blocks|key|235573|text|通过在转换opacity属性时使用.5s延迟，元素在其高度转换的整个过程中将完全透明(因此不可见)。所以你唯一能看到的就是不透明度的变化。因此，您将获得与将height属性排除在过渡之外相同的效果：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|235574|"transition:+opacity+.5s+.5s;“|235575|这是你想要的吗？如果不是，并且您希望看到高度转换，那么在整个转换过程中，不透明度不可能为零。|235576|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

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 :

"transition: opacity .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.

blocks|key|2899948|text|我认为这应该是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2899949|.element+{
+++-webkit-transition:+all+.3s;
+++-moz-transition:+all+.3s;
+++-o-transition:+all+.3s;
+++transition:+all+.3s;
}|code-block|syntax|javascript|2899950|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I think that this should work:
<pre><code>.element {
 -webkit-transition: all .3s;
 -moz-transition: all .3s;
 -o-transition: all .3s;
 transition: all .3s;
}
</code></pre>

blocks|key|235605|text|我用下面的代码让它工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|235606|.element+{
+++transition:+height+3s+ease-out,+width+5s+ease-in;
}|code-block|syntax|javascript|235607|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I made it work with this:
<pre><code>.element {
 transition: height 3s ease-out, width 5s ease-in;
}
</code></pre>

blocks|key|2899980|text|这帮助我理解/简化，仅仅是我需要的动画：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2899981|//+SCSS+-+Multiple+Animation:+Properties+%7C+durations+%7C+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
++}
}|code-block|syntax|javascript|2899982|~这适用于所有过渡属性(持续时间、过渡计时函数等)在“.base”类中|2899983|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This helped me understand / streamline, only what I needed to animate:

<pre><code>// 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;

 &amp;:hover {
 max-width: 100vw;
 opacity: 1;

 transition-duration: 5s; // effects duration of all aniomation properties
 transition-delay: 2s, 7s; // effects relatively ordered animation properties
 }
}
</code></pre>

~ This applies for all transition properties (duration, transition-timing-function, etc.) within the '.base' class

blocks|key|2900017|text|需要注意的重要一点是，CSS+transition属性本身就是一个速记--正如中所提到的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2900018|2900019|+transition+CSS属性是transition-property、transition-duration、transition-timing-function和transition-delay的速记属性。|blockquote|2900020|2900021|2900022|此简写的理想用法是将单个转换的各种Constituent+properties组合在一起。如果将其用于组合多个过渡，它将开始变得笨重。|2900023|因此，当您在同一元素上有两个以上不同组成属性的转换时，单独编写它们会变得更容易，而不是使用transition速记。例如：|2900024|这是一个元素上的多个转换的速记版本(选项1)：|2900025|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;|code-block|syntax|javascript|2900026|正如你所看到的，这变得笨拙和难以想象。|2900027|可以像这样应用相同的CSS+(选项2)：|2900028|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|2900029|当然，归根结底，这一切都取决于您对键入和维护源代码的偏好。但我个人更喜欢第二种选择。|2900030|2900031|提示：|2900032|使用此方法的另一个好处是，如果所有转换的某个构成属性都相同，则不需要多次提及它。例如，在上面的示例中，如果所有人的transition-duration都是相同的(0.5s)，则可以这样编写：|2900033|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|2900034|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/transition#constituent_properties^0|F|A|0|0|1|A|I|J|12|J|1M|Q|2D|G|0|0|0|H|M|0|0|19|A|0|0|0|0|0|0|0|0|0|1L|J|2A|4|0|0^^$0|@$1|2|3|4|5|6|7|1J|8|@$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]|$1|G|3|H|5|I|7|1N|8|@$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|K|3|-4|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|20|8|@]|D|@$9|21|A|22|1|23]]|E|$]]|$1|N|3|O|5|6|7|24|8|@$9|25|A|26|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|27|8|@]|D|@]|E|$]]|$1|R|3|S|5|T|7|28|8|@]|D|@]|E|$U|V]]|$1|W|3|X|5|6|7|29|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|2A|8|@]|D|@]|E|$]]|$1|10|3|11|5|T|7|2B|8|@]|D|@]|E|$U|V]]|$1|12|3|13|5|6|7|2C|8|@]|D|@]|E|$]]|$1|14|3|-4|5|6|7|2D|8|@]|D|@]|E|$]]|$1|15|3|16|5|6|7|2E|8|@]|D|@]|E|$]]|$1|17|3|18|5|6|7|2F|8|@$9|2G|A|2H|B|C]|$9|2I|A|2J|B|C]]|D|@]|E|$]]|$1|19|3|1A|5|T|7|2K|8|@]|D|@]|E|$U|V]]|$1|1B|3|-4|5|6|7|2L|8|@]|D|@]|E|$]]]|1C|$1D|$5|1E|1F|1G|E|$1H|1I]]]]

One important thing to note is that the CSS <code>transition</code> property itself is a shorthand - as mentioned in the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition" rel="nofollow noreferrer">MDN Web Docs</a> :
<blockquote>
The <code>transition</code> CSS property is a shorthand property for <code>transition-property</code>, <code>transition-duration</code>, <code>transition-timing-function</code>, and <code>transition-delay</code>.
</blockquote>
The ideal use of this shorthand is to combine the various <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition#constituent_properties" rel="nofollow noreferrer">Constituent properties</a> of a single transition. If this is used to combine multiple transitions, it will start to get clunky.
So when you have more than 2 transitions on the same element which different constituent properties, it becomes easier to write them individually instead of using the <code>transition</code> shorthand. For example:
This is the shorthand version(Option 1) of multiple transitions on one element:
<pre><code>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;
</code></pre>
As you can see, this gets clunky and a little bit harder to visualize. 
The same CSS can be applied like this(Option 2):
<pre><code>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
</code></pre>
Of course, ultimately it all just comes down to your preference of typing and maintaining your source code. But I personally prefer the 2nd option.
<hr />
<h2>TIP:</h2>
Additional benefit of using this is, if one of the Constituent properties is same for all transitions, you don't need to mention it multiple times. For example, in the above example, if the <code>transition-duration</code> was the same(<code>0.5s</code>) for all, you write it like this:
<pre><code>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
</code></pre>

I can't seem to find the correct syntax for the CSS transition shorthand with multiple properties. This doesn't do anything:

<pre class="lang-css prettyprint-override"><code>.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;
}
</code></pre>

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.

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 transition shorthand with multiple properties?

我似乎找不到具有多个属性的CSS transition 速记的正确语法。这不会做任何事情：.element {  -webkit-transition: height .5s, opacity .5s .5s;     -moz-transition: height .5s, opacity .5s .5s;     ...

问具有多个属性的CSS转换速记？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有多个属性的CSS转换速记？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有多个属性的CSS转换速记？
EN