html - How to play animation on div with javascript

Here is my script so far:

Html:

<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>

<body>
    <div id="test"></div>
</body>

</html>

Css:

#test {
    background-color: blue;
    width: 100px;
    height: 100px;
}

/* Here is the animation (keyframes) */
@keyframes fading {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

But how do i get the css animation (keyframes) to play on the div #test using some javascript?

Here is my script so far:

Html:

<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>

<body>
    <div id="test"></div>
</body>

</html>

Css:

#test {
    background-color: blue;
    width: 100px;
    height: 100px;
}

/* Here is the animation (keyframes) */
@keyframes fading {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

But how do i get the css animation (keyframes) to play on the div #test using some javascript?

Share Improve this question edited Jan 8, 2018 at 14:44 Sébastien 12.1k12 gold badges59 silver badges82 bronze badges asked Jan 8, 2018 at 14:15 Clint Anumudu 1151 gold badge2 silver badges10 bronze badges

4 Assign your @keyframes fading to a class and use JavaScript to add/remove the class as needed - css-tricks.com/snippets/css/keyframe-animation-syntax – Nope Commented Jan 8, 2018 at 14:19
Here a tuto link – Core972 Commented Jan 8, 2018 at 14:19
2 Why would you link w3fools if there is a billion professional sites and original documentation.... – Nope Commented Jan 8, 2018 at 14:20
read more about animation here : w3schools.com/howto/howto_js_animate.asp – Saurabh Mistry Commented Jan 8, 2018 at 14:20
If you get the right answer apply it clicking in the check button. – Randall Commented Jan 8, 2018 at 14:35

Add a comment |

6 Answers 6

Sorted by: Reset to default 13

Try to add 'animation' css property from js:

document.getElementById('test').style.animation = 'fading 2s infinite'

Add the animation to a class in CSS.

.fade {
    animation: fading 1s forwards; // "fading" is the keyframe animation you created
}

[forwards][1] makes it so the element remains in the final state of the animation.

Then in Javascript when you want to animate your div, add the class to the element.

var el = document.getElementById('test'); // get a reference to the targeted element
el.classList.add('fade'); // add the class name to that element

document.getElementById('fader').addEventListener('click', function() {
  var el = document.getElementById('test');
  el.classList.add('fade');
});

#test {
  background-color: blue;
  width: 100px;
  height: 100px;
}

.fade {
  animation: fading 1s forwards;
}


/* Here is the animation (keyframes) */

@keyframes fading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div id="test"></div>

<button type="button" id="fader">fade out</button>

.cube {
  width:40px;
  height:40px;
  background:#000;
  
  animation:spin 3s;
  animation-iteration-count:infinite;
}
@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}

<div class="cube"><div>

Like this give youre animation name like me(spin) and use this variable in animation selector with css. :)

You have to add the animation keyframe fading to the div. Have a look at this

#test {
    background-color: blue;
    width: 100px;
    height: 100px;
    position: relative;
    -webkit-animation: fading 5s infinite;
    animation: fading 5s infinite;
}

/* Here is the animation (keyframes) */
@keyframes fading {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>

<body>
    <div id="test"></div>
</body>

</html>

You just declared the animation and did not used. You have to call it with "animation" keyword:

#test {
    background-color: blue;
    width: 100px;
    height: 100px;
    animation: fading 1s;
}

There is no need to use JS when you use @keyframes css

To add the @keyframes faded animation to the div just add those additional 2 lines to #test css . This will create 5s animation

#test {
    background-color: blue;
    width: 100px;
    height: 100px;
    -webkit-animation: fading 5s; /* Safari 4.0 - 8.0 */
    animation: fading 5s;
}

You can add 'infinite' to loop the animation

-webkit-animation: fading 5s infinite; /* Safari 4.0 - 8.0 */
animation: fading 5s infinite;

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - How to play animation on div with javascript - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)