Question

我希望在弹出窗口准备接收可拖动元素时为其设置动画，即具有“接受”类。我创造了一个有限的轻松动画，它给边框带来了漂亮的蓝色发光效果。它确实没问题，但理想情况下，当弹出窗口具有“接受”类时，我希望在无限循环中轻松进出效果。这是我的代码。

if(popup.hasClass('accepting')) {
   popup.css({
          '-webkit-transition': 'all 0.3s ease-in-out',
          'outline': 'none',
          'padding': '3px 0px 3px 3px',
          'margin': '5px 1px 3px 0px',
          'box-shadow': '0 0 5px rgba(81, 203, 238, 1)',
        })
}

我在这里看到一些线程提出类似的问题，但使用@ webkit-keyframes选择器涉及的解决方案，我认为我不能在.css（{}）jQuery方法中包含其他选择器。我可以在JavaScript代码中使用更简单的方法实现吗？

你好 - Gaweyne

Answer 1

您必须使用animation-iteration-count:infinite的CSS动画类似的东西：

@keyframes glow{
    100% {
        outline: none;
        padding: 3px 0 3px 3px;
        margin: 5px 1px 3px 0;
        box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    }
}
.glow-border {
    animation-name: glow;
    animation-duration: 0.35s;
    animation-timing-function: ease-in-out;
    animation-iteration-count:infinite;
}

更改您的代码：

if(popup.hasClass('accepting')) {
   popup.addClass('glow-border');
}

查看MDN上的CSS动画文档，不要忘记添加前缀。

如何在CSS动画循环中创建无限宽松？

1 个答案: