使用JavaScript触发并循环CSS3动画

我试图在

输入

元素上实现加载动画。我希望在单击页面上的搜索按钮时触发动画，并在搜索返回时停止（在回调中）

由于我正在使用AngularJS，目前它被设置为一个

$http.get

调用和相关的

.success

回调，因此我已经有了添加触发和停止的完美位置

看着我的眼睛，你应该能看到我在努力做什么。动画应按如下方式运行：

• 首先，该条从左侧滑入，直到它完全扩展了

  输入的宽度

• 然后，它向同一方向滑动
• 一旦完全消失，动画将重新启动

在我的示例中，我使用了

：hover

来触发动画，但最终应该从JavaScript触发

如何在JavaScript中开始和结束动画循环，以及如何使其无限循环直到停止

[信贷]

---

为什么不创建一个带有动画的关键帧呢？只要将无限添加到动画迭代计数中，您就准备好了

@keyframes slideAnimation {
  0%:{
    width: 0;
    background: transparent;
    }
  100%:{
    width: 100%;
    background: #4ad;}
}
input.animate {
  animation: slideAnimation 800ms ease infinite normal 0ms running;
}

---

然后切换输入的类。

您可以制作动画，然后切换类：

HTML

<div class="sliding-u-l-r-l" id="inputElement">
  <input type="text" spellcheck="false" placeholder="Hover over me to demo">
</div>

<input type="button" id="start" value="Start" />
<input type="button" id="stop" value="Stop" />

JS

.sliding-u-l-r-l {
    display: inline-block;
    position: relative;
    padding-bottom: 2px;
}
.sliding-u-l-r-l.animate:before {
    content: '';
    display: block;
    position: absolute;
    height: 2px;
    width: 0;
    bottom: 0;
    background: #4ad;
    animation: animation 1.5s infinite;
}

@keyframes animation {
  0% {
    left: 0;
    width: 0;
  }  

  50% {
    width: 100%;
    left: 0%;
  }

  100% {
    left: 100%;
    width: 0%;
  }
}

$("#start").on("click", function() {
  $("#inputElement").addClass("animate");
});

$("#stop").on("click", function() {
  $("#inputElement").removeClass("animate");
});

如果不愿意，也可以交替播放动画（非常酷的效果），只需更改：

animation: animation 1.5s infinite;

到

代码笔结果

---

完美！谢谢你的例子。我有一些书要读。

animation: animation 1.5s infinite alternate;