Re: [css3-animations] Override of animation rule by !important

On 20 January 2012 00:01, Sylvain Galineau <sylvaing@microsoft.com> wrote:
> We resolved during the 1/4 telcon [1] to allow !important user rules to override
> animations.
>
> While this seems reasonable and coherent with the overall CSS model, we need
> to understand what it means in scenarios such as:
>
>        @keyframes colorChange {
>        from { color: red; }
>            to { color: blue; }
>        }
>        div {
>                animation: colorChange 4s infinite alternate;
>                transition: color 1s;
>        }
>
> /* user stylesheet */
> div:hover { color: green !important; }
>
>
> Obviously the fun part is when the :hover rule matches during the animation.
>
> - Does the :hover transition starts from whatever intermediate value was last
> applied by colorChange?
> - What happens when the user hovers away? Transitioning back to a moving target
> is not easy nor is it clearly desirable. Nor would a reversal look appropriate.
>
> Thoughts?
>
> [1] http://lists.w3.org/Archives/Public/www-style/2012Jan/0099.html
>
>

Why shouldn't we transition to and from moving targets?

For both animations and transitions, at any instant, we have a base
property value, a target property value, and an interpolation function
that produces an intermediate value based on the duration and the
easing. All we need is a simple pipeline, where the instantaneous,
intermediate value from the animation is fed as the base value into
the interpolation function of the transition.

Here's a quick demonstration using jQuery: http://jsfiddle.net/amtiskaw/rpMzn/4/

Jon

Received on Friday, 20 January 2012 17:07:36 UTC