使用JavaScript触发和循环CSS3动画

Question

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

由于我使用的是AngularJS，目前它被设置为$http.get调用和相关的.success回调，所以我已经有了添加触发和停止的完美位置。

看看我的CodePen示例，你应该能够看到我正在尝试做什么。动画应该像这样运行：

• 首先，条从左侧滑入，直到完全延伸出input的宽度
• 然后，它向同一个方向滑动
• 一旦它完全消失，动画就会重新启动

在我的例子中，我使用了:hover来触发动画，但最终应该是从JavaScript触发的。

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

[信贷]

http://bradsknutson.com/blog/css-sliding-underline

Answer 1

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

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" />

CSS

.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%;
  }
}

JS

$("#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;

代码笔结果http://codepen.io/anon/pen/qOQBox

Answer 2

为什么不想只构建一个带有动画的关键帧？只需在动画迭代次数中添加无限，就可以了。。。

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

然后切换输入的类。