jdphenix jdphenix - 7 months ago 35
HTML Question

Shorthand animation working only in Chrome

In Chrome, the following CSS3 animation works as I would expect, rendering an animation of the outline. However, in Internet Explorer and Firefox, this doesn't work.



@keyframes outline-pulse {
0% {
outline: 10px solid green;
}

100% {
outline: 0px solid green;
}
}

.animate {
animation: outline-pulse 1s linear 0;
animation-iteration-count: infinite;
}

<fieldset class="animate">
<p>Content</p>
</fieldset>




Answer

This appears to be due to an oversight in the WD. In particular, it does not take into account shorthand declarations in keyframes, which almost always contain at least one non-animatable component property. In fact, the editors confirmed that this is a mistake:

Yes, we absolutely intend that all values should be transitionable, with the ones that don't have explicit rules just going by a single-step transition. It just hasn't been done yet.

And the text that is quoted from the 2013 WD has been updated in the ED:

The keyframe declaration block for a keyframe rule consists of properties and values. The properties defined by this specification are ignored in these rules, with the exception of animation-timing-function,

Notice now that it only excludes the animation-* properties.

Whether IE and Firefox are in violation of the spec is debatable, since the spec hasn't reached maturity anyway. But unfortunately, unless Microsoft is willing to make an exception for this, it's very unlikely it will ever be fixed in IE. But there's a much better chance it'll be fixed in Microsoft Edge.

In the meantime, you'll need to take extra care to avoid specifying shorthands in keyframes; only change the properties that will actually be animated, and specify the rest in regular style rules.

Comments