Access CSS animation play state using JavaScript

Question

On the end of an animation attached to #profile I would like to start the animation attached to #design how would I change the external css attached to #design from animation play-state: paused; to animation play state: running; using the event listener (see below). Im stuck on the next part (after ("design"). Any help appreciated.

document.getElementById("profile").addEventListener("webkitAnimationEnd", function(){ 
var animation = document.getElementById("design")

m4n0 · Accepted Answer · 2015-10-21 11:25:14Z

3

Extend your code to use the style object property animationPlayState in JavaScript. You need not use webkitAnimationEnd event anymore, since animationend event is supported cross-browser now.

var animation = document.getElementById("design");
var profile = document.getElementById("profile");
profile.addEventListener("animationend", function() {
  animation.style.animationPlayState = "running";
});

#profile,
#design {
  animation: moveRight;
  animation-duration: 2s;
}
#design {
  animation-play-state: paused;
}
@keyframes moveRight {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 100px;
  }
}

<div id="profile">Profile</div>
<div id="design">Design</div>

answered Oct 21, 2015 at 11:25

m4n0

32.6k28 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Access CSS animation play state using JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related