在 JavaScript 中触发 CSS 动画

Question

我不知道如何使用 JQuery，所以我需要一个可以仅使用 JavaScript 触发动画的方法。

当用户滚动页面时，我需要调用/触发 CSS 动画。

 function start() {
  document.getElementById('logo').style.animation = "anim 2s 2s forward";
  document.getElementById('earthlogo').style.animation = "anim2 2s 2s forward";
}

 * {
  margin: 0px;
}

#logo {
  position: fixed;
  top: 200px;
  height: 200px;
  width: 1000px;
  left: 5%;
  z-index: 4;
  opacity: 0.8;
}

#earthlogo {
  position: fixed;
  top: 200px;
  height: 120px;
  align-self: center;
  left: 5%;
  margin-left: 870px;
  margin-top: 60px;
  z-index: 4;
  opacity: 0.9;
}

@keyframes anim {
  50% {
    filter: blur(10px);
    transform: rotate(-15deg);
    box-shadow: 0px 0px 10px 3px;
  }
  100% {
    height: 100px;
    width: 500px;
    left: 10px;
    top: 10px;
    box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.7);
    background-color: rgba(0, 0, 1, 0.3);
    opacity: 0.7;
  }
}

@keyframes anim2 {
  50% {
    filter: blur(40px);
    transform: rotate(-15deg);
  }
  100% {
    height: 60px;
    width: 60px;
    left: 10px;
    top: 10px;
    margin-left: 435px;
    margin-top: 30px;
    opacity: 0.8;
  }
}

#backstar {
  position: fixed;
  width: 100%;
  z-index: 1;
}

#earth {
  position: absolute;
  width: 100%;
  z-index: 2;
  top: 300px;
}

 <img src="logo.png" id="logo" onclick="start();">
<img src="earthlogo.gif" id="earthlogo" onscroll="start();">
<img src="earth.png" id="earth">
<img src="stars.jpg" id="backstar">

原文由 Sid 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

如何将类添加到给定元素？

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

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

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

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

 .el.addedclass {
    width:20px;
}

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

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

原文由 Blackbam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这就是您如何使用 vanilla 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>

原文由 Really Nice Code 发布，翻译遵循 CC BY-SA 4.0 许可协议