相关疑难解决方法(0)

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

我一直认为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 : …

Run Code Online (Sandbox Code Playgroud)

html css css-selectors css3 css-animations

And*_*ios

2015 08-04

6
推荐指数

1
解决办法

433
查看次数