在 JavaScript 中触发 CSS 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44846614/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger CSS Animations in JavaScript
提问by Sid
I don't know how to use JQuery, so I need a method which could trigger an animation using JavaScript only.
我不知道如何使用 JQuery，所以我需要一种只能使用 JavaScript 触发动画的方法。
I need to call/trigger CSS Animation when the user scrolls the page.
当用户滚动页面时，我需要调用/触发 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">采纳答案by Blackbam
The simplest method to trigger CSS animations is by adding or removing a class- how to do this with pure Javascript you can read here:
触发 CSS 动画的最简单方法是添加或删除类- 如何使用纯 Javascript 执行此操作，您可以在此处阅读：
How do I add a class to a given element?
If you DO use jQuery (which should really be easy to learn in basic usage) you do it simply with addClass/ removeClass.
如果您确实使用 jQuery（在基本用法中应该很容易学习），您只需使用addClass/ 即可removeClass。
All you have to do then is set a transition to a given element like this:
然后你所要做的就是设置一个到给定元素的过渡，如下所示：
.el {
width:10px;
transition: all 2s;
}
And then change its state if the element has a class:
如果元素有一个类，然后改变它的状态：
.el.addedclass {
width:20px;
}
Note: This example was with transition. But for animations its the same: Just add the animation on the element which has a class on it.
注意：这个例子是带有过渡的。但是对于动画来说也是一样：只需在具有类的元素上添加动画即可。
There is a similar question here: Trigger a CSS keyframe animation via scroll
这里有一个类似的问题：Trigger a CSS keyframe animation via scroll
回答by galtech
You could use CSS to hide the image / animation and show when the user scrolls. This would work like this:
您可以使用 CSS 隐藏图像/动画并在用户滚动时显示。这会像这样工作：
CSS:
CSS：
div {
border: 1px solid black;
width: 200px;
height: 100px;
overflow: scroll;
}
#demo{
display: none;
}
HTML:
HTML：
<div id="myDIV"> </div>
<div id="demo">
<img src="earthlogo.gif" id="earthlogo" alt="Thanks for scrolling. Now you see me">
</div>
Your javascript just needs to include an eventListener to call the function which triggers the display of your animation.
您的 javascript 只需要包含一个 eventListener 来调用触发动画显示的函数。
JS:
JS：
document.getElementById("myDIV").addEventListener("scroll", start);
function start() {
document.getElementById('demo').style.display='block';
}
回答by krolovolk
Vanilla JS version
香草JS版本
document.getElementById('logo').classList.add("anim");
document.getElementById('earthlogo').classList.add("anim2");
回答by NooTChh
Here's the main code:
这是主要代码：
HTML:
HTML：
<img id="myImg">
CSS:
CSS：
#myImg {
//properties
animation: animate 2s linear infinite //infinite is important!
}
@keyframes animate {
//animation base
}
JS:
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);
});
回答by zettlrobert
If you want Animations i recommend you create a CSS class which you toggle on a Condition whit JS: CSS
如果你想要动画，我建议你创建一个 CSS 类，你可以在条件上切换 JS：CSS
.animation {
animation: anim 2s ease infinite;
transition: .2s
}
JS
JS
// Select your Element
$element.document.querySelector(".yourElement");
$element.addEventListner('click', () => {
$element.classList.toggle("animation")
})
回答by Really Nice Code
This is how you can use vanilla JavaScript to change/trigger an animation associated with an HTML element.
这就是您如何使用普通 JavaScript 来更改/触发与 HTML 元素关联的动画。
First, you define your animations in CSS.
首先，在 CSS 中定义动画。
@keyframes spin1 { 100% { transform:rotate(360deg); } }
@keyframes spin2 { 100% { transform:rotate(-360deg); } }
@keyframes idle { 100% {} }
Thenyou use javascript to switch between animations.
然后你使用 javascript 在动画之间切换。
document.getElementByID('yourElement').style.animation="spin2 4s linear infinite";
Note: 'yourElement' is the target HTML element that you wish to animate.
注意：'yourElement' 是您希望设置动画的目标 HTML 元素。
For example: <div id="yourElement"> ... </div>
例如： <div id="yourElement"> ... </div>
