速写动画只在Chrome中工作 [英] Shorthand animation working only in Chrome

问题描述

在Chrome中，以下CSS3动画效果与我预期的一样，可以渲染大纲的动画。但是，在Internet Explorer和Firefox中，这不起作用。

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>

推荐答案

这似乎是由于WD的疏忽。特别地，它不考虑关键帧中的简写声明，其几乎总是包含至少一个非可动的组件属性。事实上，编辑确认这是一个错误：

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.

2013年WD引用的文字已在 ED ：

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,

请注意，它只排除 animation - * 属性。

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

无论IE和Firefox是否违反规范是有争议的，因为规范还没有达到成熟。但不幸的是，除非微软愿意为此做出例外，它不太可能会在IE中被修复。但是在Microsoft Edge中有更好的机会被修复。

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.

在此期间，您需要格外小心，避免在关键帧中指定shorthands;只更改实际将动画的属性，并在常规样式规则中指定其余。

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.

这篇关于速写动画只在Chrome中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！