在JavaScript中触发CSS动画 [英] Trigger CSS Animations in JavaScript
问题描述
我不知道如何使用JQuery，所以我需要一种只能使用JavaScript触发动画的方法。
我需要在用户滚动页面时调用/触发CSS动画。
请帮我解决这个问题。
< html>
< head>
< style>
*
{
margin：0px;
}
#logo
{
position：fixed;
top：200px;
height：200px;
width：1000px;剩余
：5％;
z-index：4;
不透明度：0.8;
}
#earthlogo
{
position：fixed;
top：200px;
height：120px;
align-self：center;剩余
：5％;
margin-left：870px;
margin-top：60px;
z-index：4;
不透明度：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）;
不透明度：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;
不透明度：0.8;
}
}
body
{
height：2000px;
}
#backstar
{
position：fixed;
宽度：100％;
z-index：1;
}
#earth
{
position：absolute;
宽度：100％;
z-index：2;
top：300px;
}
< / style>
< script>
函数start（）
{
document.getElementById（'logo'）。style.animation =anim 2s 2s forward;
document.getElementById（'earthlogo'）。style.animation =anim2 2s 2s forward;
}
< /头>
< body>
< img src =logo.pngid =logoonclick =start（）;>
< img src =earthlogo.gifid =earthlogoonscroll =start（）;>
< img src =earth.pngid =earth>
< img src =stars.jpgid =backstar>
< / body>
触发CSS动画的最简单方法是添加或删除类 - 如何使用纯Javascript执行此操作，您可以在这里阅读：
如果您使用jQuery（在基本用法中应该很容易学习），您只需使用 addClass / removeClass 。
然后，您必须设置过渡到给出这样的元素：
.el {
width：10px;
过渡：全部2秒;
}
然后改变它的状态如果元素有一个类：
.el.addedclass {
width：20px;
}
注意：此示例与转换有关。但对于动画来说，它是一样的：只需在其上有一个类的元素上添加动画。
类似的问题在这里：通过滚动触发CSS关键帧动画
I don't know how to use JQuery, so I need a method which could trigger an animation using JavaScript only. I need to call/trigger CSS Animation when the user scrolls the page. Please help me out of this problem.
<html>
<head>
<style>
*
{
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;
}
}
body
{
height: 2000px;
}
#backstar
{
position:fixed;
width: 100%;
z-index: 1;
}
#earth
{
position: absolute;
width:100%;
z-index: 2;
top: 300px;
}
</style>
<script>
function start()
{
document.getElementById('logo').style.animation = "anim 2s 2s forward";
document.getElementById('earthlogo').style.animation = "anim2 2s 2s forward";
}
</head>
<body>
<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">
</body>
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:
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.
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.
Similar question here: Trigger a CSS keyframe animation via scroll
这篇关于在JavaScript中触发CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
