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

Answer 1

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

How do I add a class to a given element?

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

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

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

如果元素有类则改变其状态：

.el.addedclass {
    width:20px;
}

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

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

Answer 2

这是您可以使用原生 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 元素 ID。

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

Answer 3

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

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

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

Answer 4

原生 JS 版本

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

Answer 5

您可以使用 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';
}

Answer 6

我也有类似的问题。 最好的答案对我不起作用，但是当我添加延迟时它起作用了。 以下是我的解决方案。

CSS

.circle_ani1,
.circle_ani2 {
    animation-duration: 1s;
    animation-iteration-count: 1;
}

.circle_ani1 {
    animation-name: circle1;
}

.circle_ani2 {
    animation-name: circle2;
}

JS

let temp_circle1 = $('.TimeCountdown_circle1').removeClass('circle_ani1');
let temp_circle2 = $('.TimeCountdown_circle2').removeClass('circle_ani2');
window.setTimeout(function() {
    temp_circle1.addClass('circle_ani1');
    temp_circle2.addClass('circle_ani2');
}, 50);

Answer 7

主要代码如下：

HTML：

<img id="myImg">

CSS：

#myImg {
    //properties
    animation: animate 2s linear infinite //infinite is important!
}
@keyframes animate {
    //animation base
}

JS：

document.getElementById("myImg").style.webkitAnimationPlayState = "paused";
window.addEventListener("scroll", function() {
    document.getElementById("myImg").style.webkitAnimationPlayState = "running";
    setTimeout(function() {
        document.getElementById("myImg").style.webkitAnimationPlayState = "paused";
    }, 2000);
});

Answer 8

如果你想要动画，我建议你创建一个 CSS 类，你可以在 JS 条件下切换： CSS

.animation {
 animation: anim 2s ease infinite;
 transition: .2s
}

JS

// Select your Element

$element.document.querySelector(".yourElement");
$element.addEventListner('click', () => {
 $element.classList.toggle("animation")
})

Answer 9

更惯用的解决方案是使用Web Animations API。

这是来自MDN的示例：

document.getElementById("alice").animate(
  [
    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
    { color: '#431236', offset: 0.3 },
    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
  ], {
    duration: 3000,
    iterations: Infinity
  }
);

OP 的例子：

document.getElementById('logo').animate(
    [
        {},
        {
            filter: 'blur(10px)',
            transform: 'rotate(-15deg)',
            box-shadow: '0px 0px 10px 3px',
        },
        {
            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',
        },
    ],
    {
        duration: 2000,
        delay: 2000,
        fill: 'forwards',
    },
)

在撰写本文时，除 IE 外，所有主流浏览器都支持它。 Supported browsers