首頁猿問如何使用 vanilla...

如何使用 vanilla javascript 觸發 css 動畫

JavaScript

萬千封印 2023-08-24 18:23:55

我正在嘗試用 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;} }

查看完整描述

4 回答

嚕嚕噠

TA貢獻1784條經驗獲得超7個贊

我認為添加class是一種健康的方式。

檢查此處的示例：https ://codepen.io/yasgo/pen/zYBgjXN

document.getElementById('box').classList.add('active-animation');

.box {

width: 50px;

height: 50px;

background-color: black;

}

.box.active-animation {

animation: party 5s infinite;

}

@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;}

}

反對回復 2023-08-24

慕桂英4014372

TA貢獻1871條經驗獲得超13個贊

這比你想象的要容易得多，你只需要調用動畫，就像這樣：

這是使用按鈕觸發的示例

function party(){

document.body.style.animation = 'party 2.5s infinite linear';

}

body{

background-color: purple;

}

@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;}

}

<html>

<button onclick="party()">Press Me!</button>

</body>

</html>

我等著這可以幫助你！

反對回復 2023-08-24

臨摹微笑

TA貢獻1982條經驗獲得超2個贊

var box = document.getElementById('box');

box.style.animation = "party 5s infinite";

#box {

width: 200px;

height:150px;

background-color: black;

margin: 20px auto;

border-radius: 5px;

}

@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;}

}

反對回復 2023-08-24

慕雪6442864

TA貢獻1812條經驗獲得超5個贊

您可以設置animation要設置動畫的元素的屬性，如下所示。

// sets the css animation property

const spinner = document.getElementById("spinner");

spinner.style.animation = "spin 3s linear infinite";

/* gives the div element a border and size */

#spinner {

border: 15px solid black;

border-top: 15px solid white;

border-bottom: 15px solid white;

border-radius: 50%;

width: 50px;

height: 50px;

/* no animation property is inserted here */

}

/* spin animation */

@keyframes spin {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

反對回復 2023-08-24

4 回答
0 關注
278 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用 vanilla javascript 觸發 css 動畫

如何使用 vanilla javascript 觸發 css 動畫

4 回答

添加回答