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

Question

我一直认为 CSS3 Animations(不同于 CSS3 Transitions)一旦开始，总是完成工作，无论选择器是否不再匹配激活它们的元素。

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

在下面的示例中，动画由 :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 提供)可能对我们的案例更有用，但它只是在遇到动画异常结束时触发的事件。我们仍然必须编写自己的代码以使其持续到一个周期结束。