在 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 执行此操作，您可以在此处阅读：

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

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

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

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

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

.el.addedclass {
    width:20px;
}

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

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

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 元素 ID。

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

Answer 3

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

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

.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 6

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

更惯用的解决方案是使用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 外，所有主流浏览器都支持它。 支持的浏览器

Answer 8

这是主要代码：

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 9

如果你想要动画，我建议你创建一个 CSS 类，你可以在 Condition whit 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 10

您可以像这样使用animation-play-state （ Mdn docs ）

element.style.animationPlayState = "paused/running"

代码片段：

 function play() { document.getElementById("div").style.animationPlayState = "running"; } function pause() { document.getElementById("div").style.animationPlayState = "paused"; }

 .animation { width: 50px; height: 50px; background-color: red; position: relative; animation-name: example; animation-duration: 2s; animation-play-state: paused; animation-iteration-count: infinite; } @keyframes example { 0% { background-color: red; left: 0px; top: 0px; } 25% { background-color: yellow; left: 50px; top: 0px; } 50% { background-color: blue; left: 50px; top: 50px; } 75% { background-color: green; left: 0px; top: 50px; } 100% { background-color: red; left: 0px; top: 0px; } }

 <button onclick="play()">Play</button> <button onclick="pause()">Pause</button><br><br> <div id="div" class="animation"></div>