猿问

如何使用 vanilla javascript 触发 css 动画

我正在尝试用 javascript 制作一个 css 动画触发器。我已经用它制作了动画@keyframes并且它可以工作。有人知道如何在没有像 jQuery 这样的东西的情况下做到这一点吗？


这是我的代码：


/* Animations */


@keyframes party{

    0% {background-color: red;}

    10% {background-color: orange;}

    20% {background-color: yellow;}

    30% {background-color: green;}

    40% {background-color: blue;}

    50% {background-color: purple;} 

}


@-webkit-keyframes party{

    0% {background-color: red;}

    10% {background-color: orange;}

    20% {background-color: yellow;}

    30% {background-color: green;}

    40% {background-color: blue;}

    50% {background-color: purple;} 

}


万千封印
浏览 213回答 4
4回答

噜噜哒

我认为添加class是一种健康的方式。检查此处的示例：https ://codepen.io/yasgo/pen/zYBgjXNdocument.getElementById('box').classList.add('active-animation');.box {&nbsp; width: 50px;&nbsp; height: 50px;&nbsp; background-color: black;}.box.active-animation {&nbsp; animation: party 5s infinite;}@keyframes party{&nbsp; &nbsp; 0% {background-color: red;}&nbsp; &nbsp; 10% {background-color: orange;}&nbsp; &nbsp; 20% {background-color: yellow;}&nbsp; &nbsp; 30% {background-color: green;}&nbsp; &nbsp; 40% {background-color: blue;}&nbsp; &nbsp; 50% {background-color: purple;}&nbsp;}<div id="box" class="box"></di>
0

慕桂英4014372

这比你想象的要容易得多，你只需要调用动画，就像这样：这是使用按钮触发的示例function party(){&nbsp; document.body.style.animation = 'party 2.5s infinite linear';}body{background-color: purple;}@keyframes party{&nbsp; &nbsp; 0% {background-color: red;}&nbsp; &nbsp; 10% {background-color: orange;}&nbsp; &nbsp; 20% {background-color: yellow;}&nbsp; &nbsp; 30% {background-color: green;}&nbsp; &nbsp; 40% {background-color: blue;}&nbsp; &nbsp; 50% {background-color: purple;}&nbsp;}@-webkit-keyframes party{&nbsp; &nbsp; 0% {background-color: red;}&nbsp; &nbsp; 10% {background-color: orange;}&nbsp; &nbsp; 20% {background-color: yellow;}&nbsp; &nbsp; 30% {background-color: green;}&nbsp; &nbsp; 40% {background-color: blue;}&nbsp; &nbsp; 50% {background-color: purple;}&nbsp;}<html>&nbsp; <body id="bd">&nbsp; &nbsp; <button onclick="party()">Press Me!</button>&nbsp; </body></html>我等着这可以帮助你！
0

临摹微笑

var box = document.getElementById('box');box.style.animation = "party 5s infinite";#box {&nbsp; width: 200px;&nbsp; height:150px;&nbsp; background-color: black;&nbsp; margin: 20px auto;&nbsp; border-radius: 5px;}@keyframes party{&nbsp; &nbsp; 0% {background-color: red;}&nbsp; &nbsp; 10% {background-color: orange;}&nbsp; &nbsp; 20% {background-color: yellow;}&nbsp; &nbsp; 30% {background-color: green;}&nbsp; &nbsp; 40% {background-color: blue;}&nbsp; &nbsp; 50% {background-color: purple;}&nbsp;}@-webkit-keyframes party{&nbsp; &nbsp; 0% {background-color: red;}&nbsp; &nbsp; 10% {background-color: orange;}&nbsp; &nbsp; 20% {background-color: yellow;}&nbsp; &nbsp; 30% {background-color: green;}&nbsp; &nbsp; 40% {background-color: blue;}&nbsp; &nbsp; 50% {background-color: purple;}&nbsp;}<div id="box"></div>
0

慕雪6442864

您可以设置animation要设置动画的元素的属性，如下所示。// sets the css animation propertyconst spinner = document.getElementById("spinner");spinner.style.animation = "spin 3s linear infinite";/* gives the div element a border and size */#spinner {&nbsp; border: 15px solid black;&nbsp; border-top: 15px solid white;&nbsp; border-bottom: 15px solid white;&nbsp; border-radius: 50%;&nbsp; width: 50px;&nbsp; height: 50px;&nbsp; /* no animation property is inserted here */}/* spin animation */@keyframes spin {&nbsp; 0% {&nbsp; &nbsp; transform: rotate(0deg);&nbsp; }&nbsp; 100% {&nbsp; &nbsp; transform: rotate(360deg);&nbsp; }}<!-- div element to animate --><div id="spinner"></div>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答