如果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>