如果select器不匹配，如何运行CSS3animation到最后？
我一直认为CSS3animation（不同于CSS3转换） 一旦开始，总是完成作业 ，不pipeselect器是否不再匹配激活它们的元素。
我今天意识到我可能是错的。
在下面的例子中，animation是由:focus和:active伪类触发的。 关注第一个文本框：
- 如果您慢慢按下Tab键，您将看到正确的animation开始和结束;
- 如果您快速按下Tab键，您将看到一旦新元素获得焦点，旧元素的animation立即结束并消失。
@-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，铬没有），通过应用：
a { transition: all 2s ease; }
所以如果加载到（例如）40％，它将从40％回弹到0％，而不是立即降到0％。
– 我也知道，我可以使用jQueryanimation而不是CSS3animation，并使其以这种方式工作; （ 编辑 ：根据评论，甚至没有jQueryanimation将这样工作，如果我有这个权利）
我在这里问的作为一个CSS3animation新手，是：
有没有纯粹的CSS3方式强制animation运行高达100％，无论初始条件是否无效？
正如在注释中所讨论的那样，即使在最初应用animation的select器规则不再适用之后，目前还没有办法迫使animation完成一个完整的循环。
实现这一点的唯一方法是使用脚本。 以下是使用JavaScript的示例代码片段。 这样做是在获得焦点时向元素添加一个类（具有animation属性集），然后仅在animation结束时将其删除。
注意： 我在代码片段中使用了webkitAnimationEnd事件，所以在其他浏览器中不起作用。 该代码还需要更多的微调，因为它目前只在animation结束时才移除该类。 所以，如果你在一个周期完成之前标签出来，那么什么都不会发生。
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="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>
