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

On Jan 19, 2012, at 4:01 pm, Sylvain Galineau 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?

I think the :hover transition would start from the underlying color value (the one that
would be visible if the animation were not running).

> - 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.

I guess it depends on whether we think that the effect of !important extends until the
end of the transition. If it does, then you could transition from green back to the underlying
color, and then go back to showing the animating color once that transition finishes.

If it does not, then I think the animation would "win" as soon as :hover unapplies, and there
would be no transition.

Simon

Received on Tuesday, 24 January 2012 16:34:17 UTC