触发 CSS 动画的最简单方法是添加或删除类- 如何使用纯 Javascript 执行此操作，您可以在此处阅读：

如何向给定元素添加类？

如果您确实使用 jQuery（在基本用法中应该很容易学习），您只需使用addClass/ 即可removeClass。

然后你要做的就是设置一个给定元素的过渡，如下所示：

.el {
    width:10px;
    transition: all 2s;
}

如果元素有一个类，然后改变它的状态：

.el.addedclass {
    width:20px;
}

注意：这个例子是带有过渡的。但是对于动画来说也是一样：只需在具有类的元素上添加动画即可。

这里有一个类似的问题：Trigger a CSS keyframe animation via scroll

这就是您如何使用普通 JavaScript 来更改/触发与 HTML 元素关联的动画。

首先，在 CSS 中定义动画。

@keyframes spin1 { 100% { transform:rotate(360deg); } }
@keyframes spin2 { 100% { transform:rotate(-360deg); } }
@keyframes idle { 100% {} }

然后您使用 javascript 在动画之间切换。

document.getElementByID('yourElement').style.animation="spin2 4s linear infinite";

注意：'yourElement' 是您希望设置动画的目标 HTML 元素。

例如： <div id="yourElement"> ... </div>

香草JS版本

document.getElementById('logo').classList.add("anim");
document.getElementById('earthlogo').classList.add("anim2");

添加和删​​除动画类在函数中不起作用。延迟简直太小了。正如本文所建议的，您可以请求浏览器重排，然后添加类。在这种情况下，延迟不是问题。因此，您可以使用以下代码：

element.classList.remove("animation")
element.ofsettWidth
element.classList.add("animation")

最好的是，这在任何地方都有效。所有的功劳都归于这篇文章。

您可以使用 CSS 隐藏图像/动画并在用户滚动时显示。这会像这样工作：

CSS：

div {
    border: 1px solid black;
    width: 200px;
    height: 100px;
    overflow: scroll;
}

#demo{
    display: none;
}

HTML：

<div id="myDIV"> </div>

<div id="demo">
     <img src="earthlogo.gif" id="earthlogo" alt="Thanks for scrolling. Now you see me">
</div>

您的 javascript 只需要包含一个 eventListener 来调用触发动画显示的函数。

JS：

document.getElementById("myDIV").addEventListener("scroll", start);

function start() {
    document.getElementById('demo').style.display='block';
}