How can I specify a CSS3 transition to all properties, but with one exception/override?

问题

I have a CSS transition set up on an element, with all properties being affected. I don't know ahead of time which CSS properties will change, so I have no choice but to use "all" despite the performance issues.

.a {
    transition: all 0.5s ease-in-out;
}

However, I want a specific property to have its own transition settings different from every other property:

.a {
    transition: all 0.5s ease-in-out, margin-top 5s linear;
}

According to the W3C grammar for transition-property, other values should be allowed after 'all' is specified.

However, this doesn't seem to work in Firefox (18) and Opera (12). It works correctly in Chrome/Safari (with prefix) and IE10.

Here's a fiddle demonstrating the behavior: http://jsfiddle.net/F7tb5/3/

Is there a way to get this to work in all modern browsers without manually enumerating all properties that could possibly change?

回答1:

That is a bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=835007 (similar question: 14533519 but was recently fixed for the Firefox 21 milestone. Until then, you can't use all as part of multiple transitions and have to specify every property separately.

To be fair though, only the most recent W3C draft explicitly states this behaviour; earlier versions were not very clear how this case should be handled.

I had a similar case and the work-around was to create a wrapper element that animates all properties that are known before and leave all for the actual elements:

.wrap.a {
  transition: margin-top 5s linear;
}

.wrap.a .inner {
  transition: all 0.5s ease-in-out;
}

来源：https://stackoverflow.com/questions/14533519/how-can-i-specify-a-css3-transition-to-all-properties-but-with-one-exception-ov