在JavaScript中触发CSS动画
我不知道如何使用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">
问题答案：
触发CSS动画的最简单方法是 添加或删除类 -如何使用纯Javascript执行此操作，您可以在此处阅读：
如果您确实使用jQuery（在基本用法上应该很容易学习），则只需使用addClass/即可removeClass。
然后，您要做的就是设置到给定元素的过渡，如下所示：
.el {
width:10px;
transition: all 2s;
}
然后，如果元素具有类，则更改其状态：
.el.addedclass {
width:20px;
}
注意：此示例带有过渡。但是对于动画来说是相同的：只需将动画添加到具有类的元素上。
-
问题内容： 因此，我有以下规则： 还有一些CSS定义了我的一些动画规则： 我可以在这样的： 但是我以后不能再动摇了。 这只会摇晃盒子一次： 如何在不使用超时或多个动画的情况下通过JavaScript重新触发CSS动画？ 问题答案： 我在CSS3转换测试github页面上根据源代码和示例找到了答案。 基本上，CSS动画具有一个在动画完成时触发的事件。 对于Webkit浏览器，此事件称为“”。因此，为
-
本文向大家介绍如何在javascript中手动触发onchange事件？，包括了如何在javascript中手动触发onchange事件？的使用技巧和注意事项，需要的朋友参考一下 您可以使用dispatchEvent方法在单个元素上调度事件。假设您有一个带有onChange事件的元素测试- 事件处理程序- 手动触发事件- 这将记录以下内容-
-
问题内容： 我已使用将事件附加到文本框。它工作正常。当我想通过另一个函数以编程方式触发事件时，出现了我的问题。 我该怎么做？ 问题答案： 您可以在IE 8或更低版本上使用fireEvent，在大多数。要创建您要触发的事件，可以使用或取决于浏览器。 这是一段不言自明的代码（来自原型），它在上触发事件：
-
问题内容： 如果使用jQuery添加或更改CSS类，如何触发事件？更改CSS类是否会触发jQuery 事件？ 问题答案： 每当您在脚本中更改类时，都可以使用A 引发自己的事件。 但是否则，没有什么办法可以在类更改时触发事件。仅在焦点离开输入已更改的输入后才触发。
-
问题内容： 我正在创建一个DOM元素（一个div），将其添加到DOM，然后在javascript中快速点击即可更改其宽度。从理论上讲，这应该触发CSS3转换，但是结果是从A到B直接转换，而两者之间没有转换。 如果我通过单独的测试点击事件来更改宽度，则一切都会按预期进行。 这是我的JS和CSS： JS（jQuery）： CSS（目前仅使用mozilla）： 我是在这里搞砸了吗，还是“一键通”不应该做
-
问题内容： 当用户将鼠标悬停在元素上时，CSS的“悬停状态”将触发： 我们如何使用Javascript将元素设置为“悬停状态”？ 可能吗？ 问题答案： 如果您可以接受使用而不是悬停，则可以使用： 要么 显然，这种方法需要调整CSS使其包含以下样式：