如果选择器不再匹配，如何将 CSS3 动画运行到最后？

Question

我一直认为 CSS3 动画（不同于 CSS3 过渡）一旦开始，总是会完成工作，无论选择器是否不再匹配激活它们的元素。

我今天意识到我可能错了。

在以下示例中，动画由:focus和:active伪类触发。 专注于第一个文本字段：

• 如果你慢慢按下tab按钮，你会看到动画正确开始和结束；
• 如果你快速按下tab按钮，你会看到一旦新元素获得焦点，旧元素的动画立即结束并消失。

 @-webkit-keyframes pressed { 0%, 100% { transform : scale(1); } 50% { transform : scale(2); } } @keyframes pressed { 0%, 100% { transform : scale(1); } 50% { transform : scale(2); } } a:focus, a:active { -webkit-animation : pressed 2s; animation : pressed 2s; } a, input { border : 1px solid silver; padding : 5px; height : 40px; line-height : 28px; margin : 0px; display : inline-block; width : 33.3%; box-sizing : border-box; background : white; vertical-align : middle; } a { color : dodgerBlue; text-decoration : none;} input { color : red; }

 <input type="text" id="foo" value="Start here, then press tab" /><a href = "#"> Lorem </a><a href = "#"> Ipsum </a><a href = "#"> dolor </a><a href = "#"> sit </a><a href = "#"> amet </a><a href = "#"> consectetur </a><a href = "#"> adipiscing </a><a href = "#"> elit </a>

我知道我可以通过应用使其顺利结束（在某些浏览器上，例如 Firefox 是，Chrome 否）：

    a { transition: all 2s ease; }

这样如果它加载到（例如）40%，它就会从 40% 恢复到 0%，而不是立即降到 0%。

- 我也知道我可以使用 jQuery 动画代替 CSS3 动画并使其以这种方式工作； （编辑：根据评论，如果我做对了，即使是 jQuery 动画也不会以这种方式工作）

作为 CSS3 动画新手，我在这里问的是：

无论初始条件是否不再有效，是否有一种纯 CSS3 方法可以强制动画运行到 100%？

Answer 1

正如评论中所讨论的，即使在最初应用动画的选择器规则不再适用之后，目前也无法强制动画完成一个完整的循环。

实现这一目标的唯一方法是使用脚本。 下面是一个使用 JavaScript 的示例代码段。 这样做是在元素获得焦点时向元素添加一个类（设置了animation属性），然后仅在动画结束时将其删除。

^{注意：我在代码片段中使用了 webkitAnimationEnd 事件，因此它在其他浏览器中不起作用。 代码还需要更多微调，因为它目前仅在动画结束时删除类。 因此，如果您在一个周期完成之前跳出并跳入，则什么也不会发生。}

 window.onload = function() { var anchors = document.querySelectorAll('a'); for (var i = 0; i < anchors.length; i++) { anchors[i].addEventListener('focus', function() { addanim(this); }); anchors[i].addEventListener('webkitAnimationEnd', function() { endanim(this); }); } function addanim(el) { el.classList.add('focus'); } function endanim(el) { el.classList.remove('focus'); } }

 @keyframes pressed { 0%, 100% { transform: scale(1); } 50% { transform: scale(2); } } .focus { animation: pressed 2s; } a, input { border: 1px solid silver; padding: 5px; height: 40px; line-height: 28px; margin: 0px; display: inline-block; width: 33.3%; box-sizing: border-box; background: white; } a { color: dodgerBlue; text-decoration: none; } input { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <input type="text" id="foo" value="Start here, then press tab" /> <a href="#">Lorem</a> <a href="#">Ipsum</a> <a href="#">dolor</a> <a href="#">sit</a> <a href="#">amet</a> <a href="#">consectetur</a> <a href="#">adipiscing</a> <a href="#">elit</a>

评论中提到的animationcancel事件（由 BoltClock 提供）可能对我们的案例更有用，但它只是在遇到动画异常结束时触发的事件。 我们仍然需要编写自己的代码以使其持续到循环结束。