如何在 CSS 动画循环中创建无限缓动？答案

【问题标题】：How to create an infinite easing in and out CSS animation loop?如何在 CSS 动画循环中创建无限缓动？
【发布时间】：2015-07-17 18:35:28
【问题描述】：

我想在准备好接收可拖动元素时为弹出框的边框设置动画，即具有“接受”类。我创建了一个有限缓入动画，它为边框提供了漂亮的蓝色发光效果。没关系，但理想情况下，我希望在弹出窗口具有“接受”类时，在无限循环中缓入缓出和再次缓入。这是我的代码。

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 代码中实现？

谢谢你 - 高文

【问题讨论】：

不，那没用，之前尝试过类似的东西。但是，当然，我根本不需要在 JavaScript 中使用条件：我可以使用 .accepting {} 选择器在单独的样式表中做到这一点。我会看看其他地方更长的解决方案，看看它们是否有效。谢谢！

标签： javascript jquery css animation

【解决方案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 动画文档，不要忘记为其添加前缀。

【讨论】：

你秒杀我。现在有类似的东西，但感谢您的回复。