当内容滚动到视图中时，激活CSS3动画

Question

我有一个用CSS3制作动画的条形图，当前在页面加载时激活动画。

我的问题是，由于之前有很多内容，因此给定的条形图不在屏幕上，因此当用户向下滚动到该条形图时，动画已经完成。

我一直在寻找通过CSS3或jQuery仅在查看者看到图表时激活条形图上的CSS3动画的方法。

<div>lots of content here, it fills the height of the screen and then some</div>

<div>animating bar chat here</div>

如果在页面加载后立即快速向下滚动，则可以看到该动画。

这是我的代码的jsfiddle。另外，我不知道这是否重要，但是我在页面上有此条形图的多个实例。

我遇到了一个名为Waypoint的jQuery插件，但是我绝对没有运气。

如果有人可以指出正确的方向，那将非常有帮助。

谢谢！

Answer 1

为了激活CSS动画，需要在元素可见时将一个类添加到该元素。正如其他答案所表明的那样，为此需要JS，而Waypoints是可以使用的JS脚本。航点是滚动到某个元素时触发功能的最简单方法。在Waypoints版本2之前，这曾经是一个相对简单的jquery插件。在版本3及更高版本（本指南版本3.1.1）中，引入了一些功能。为了达到上述目的，可以使用脚本的“ inview快捷方式”：从此链接或从Github下载并添加脚本文件（版本3 尚未通过CDNJS提供，尽管RawGit始终是一个选项）。照常将脚本添加到HTML中。<script src="/path/to/lib/jquery.waypoints.min.js"></script><script src="/path/to/shortcuts/inview.min.js"></script>添加以下JS代码，#myelement并用适当的HTML元素jQuery选择器替换：$(window).load(function () {&nbsp; &nbsp; var in_view = new Waypoint.Inview({&nbsp; &nbsp; &nbsp; &nbsp; element: $('#myelement')[0],&nbsp; &nbsp; &nbsp; &nbsp; enter: function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#myelement').addClass('start');&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; exit: function() {&nbsp; // optionally&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#myelement').removeClass('start');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});我们使用此处$(window).load()说明的原因。