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

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

如评论中所讨论的，即使在最初应用该动画的选择器规则不再适用之后，目前也没有办法强制动画完成一个完整的周期。

实现此目的的唯一方法是使用脚本。以下是使用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提出）对于我们的案例可能更有用，但它只是遇到动画异常结束时触发的事件。我们仍然必须编写自己的代码，以使其继续到周期结束。