为了账号安全,请及时绑定邮箱和手机立即绑定

如何使用 vanilla javascript 触发 css 动画

如何使用 vanilla javascript 触发 css 动画

万千封印 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;} 

}

<div id="box" class="box"></di>


查看完整回答
反对 回复 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>

  <body id="bd">

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

}

<div id="box"></div>


查看完整回答
反对 回复 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);

  }

}

<!-- div element to animate -->

<div id="spinner"></div>


查看完整回答
反对 回复 2023-08-24
  • 4 回答
  • 0 关注
  • 143 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信