在不刷新网页的情况下为进度条设置动画答案

【问题标题】：Animate a progress bar without refreshing web page在不刷新网页的情况下为进度条设置动画
【发布时间】：2019-01-22 10:38:29
【问题描述】：

我正在尝试创建一个进度条来指示网站上的一些虚拟统计信息。进度条的值是硬编码的。我已经成功地创建了这样的进度条

.progress .progress-bar {
  box-shadow: none;
  position: relative;
  border-radius: 20px;
  animation: animate-positive 1s;
}

@keyframes animate-positive {
  0% {
    width: 0;
  }
}

<div class="progress">
  <div class="progress-bar" style="width: 60%; background: goldenrod;">
    <h3 class="progress-title">Happy Clients</h3>
    <div class="progress-value">60+</div>
  </div>
</div>

我的问题是，这只会在页面加载时产生动画，并且必须刷新页面才能再次查看。有没有一种方法可以仅在该部分可见时为其设置动画？

【问题讨论】：

连接到后端的 API 端点，例如一个 XHR 请求，获取最新的进度值，然后使用 JavaScript 到您的进度条。
@Nick 你介意告诉我怎么做还是让我参考任何关于如何做到这一点的教程？
对不起，这个问题太笼统了。这取决于许多因素，例如你的后端是什么，你的价值观首先来自哪里。您可以像这样开始解决您的问题：您从哪里获得 60% 值？我猜你在后端得到了那个数字，然后将它渲染到 HTML 页面中。然后学习如何制作 API 和 XHR 请求......祝你好运！
@Nick 这些值是硬编码的，就像你在代码 sn-p 中看到的那样，没有后端代码，只有 html、css 和一点点 js
我想我误解了。你只想要一个连续的动画，即假值，而不是测量一些真实状态的进度吗？也许您应该搜索 CSS 属性 animation-iteration-count: infinite 或者通常查找有关 CSS 关键帧动画的更多信息以自定义动画。示例：codepen.io/jguerralla/pen/gKWWbO

标签： javascript html css

【解决方案1】：

我希望这是您正在寻找的：

.progress .progress-bar {
  box-shadow: none;
  position: relative;
  border-radius: 20px;
  animation: animate-positive 1.5s ease 0s alternate infinite none running;
}
.progress-title{
  white-space:nowrap;
}

@keyframes animate-positive {
  0% {
    width: 0;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 0;
  }
}

<div class="progress">
  <div class="progress-bar" style="width: 60%; background: goldenrod;">
    <h3 class="progress-title">Happy Clients</h3>
    <div class="progress-value">60+</div>

  </div>
</div>

【讨论】：

当用户向下滚动到它所在的部分时，我想要它动画一次
为此您需要 javascript。如果我来一个js解决方案可以吗？
没问题，我想要的只是帮助完成这项工作
@Otema 您可以尝试aos 动画滚动动画。检查下面的链接：github.com/michalsnik/aos