Re: [transitions][cascade] CSS Transitions, animations and the cascade.

On Wed, Sep 23, 2015 at 7:28 PM, Estelle Weyl <estelle@weyl.org> wrote:
> According to the cascade, transitions take highest priority:
>
> http://www.w3.org/TR/css-cascade-3/#cascading
> Origin and Importance
> The origin of a declaration is based on where it comes from and its
> importance is whether or not it is declared !important (see below). The
> precedence of the various origins is, in descending order:
> 1. Transition declarations [CSS3-TRANSITIONS]
> 2. Important user agent declarations
> 3. Important user declarations
> 4. Important override declarations [DOM-LEVEL-2-STYLE]
> 5. Important author declarations
> 6. Animation declarations [CSS3-ANIMATIONS]
>
> In implementations, we’ve already seen that browsers allow animated property
> values to override !important: (example at
> http://estelle.github.io/doyouknowcss/files/importantanimation.html)
>
> Reading the transition spec, it states:
>
> "Implementations must add this value to the cascade if and only if that
> property is not currently undergoing a CSS Animation ([CSS3-ANIMATIONS]) on
> the same element.” - https://drafts.csswg.org/css-transitions-1/#application
>
> Which indicates to me that animation should take precedence over
> transitions.

This part is just to make sure you don't have weird/stupid
interactions between the two; the idea is that property changes caused
by animations cannot cause transitions, not that they "win" over
transitions, because animation-caused changes are meant to be part of
a "continuous" series of changes already.  There's no need for
transitions to "smooth out" the change, and allowing it to do so
almost never actually has an effect (the transition-induced change is
immediately overruled by the new value applied by the animation in the
next frame), but when it *does* (the animation ends), you get a dumb
smear-out effect.

~TJ

Received on Thursday, 24 September 2015 19:11:12 UTC