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>

回答1:

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.

回答2:

In order to have Internet Explorer and Firefox render this effect, you need to add an outline to the class definition. A 0 pixel outline will not change the appearance and make it 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;
  outline: 0 solid green;  /* important bit */
}

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

This is necessary because according to the CSS Animations specification, regarding keyframe declaration blocks (emphasis mine):

The keyframe declaration block for a keyframe rule consists of properties and values. Properties that are unable to be animated are ignored in these rules, with the exception of ‘animation-timing-function’,

As @Harry points out in comments, the outline-style property is not animatable, and it's presence in the keyframe declaration is ignored by Internet Explorer and Firefox as defined in the specification. Therefore, the outline-style must be declared in the class declaration to be shown.