TAGS :Viewed: 9 - Published at: a few seconds ago

[ Javascript Event Listner Issue ]

The console in the Chrome developer tools shows no errors, the div loads, but the animation play state remains paused - what am I doing wrong?

document.getElementById("design").addEventListener("webkitAnimationEnd", animation);

function animation(){
    "use strict";
    document.getElementById("profile").classList.add("animation");
    location.href = "#profile";
}

CSS

#design {
position: relative;
-webkit-animation: mixdesign;
-webkit-animation-play-state: running;
-webkit-animation-duration: 30s;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
z-index: 8;
}

/* Profile */

profile {

position: relative; -webkit-animation: profile; -webkit-animation-duration: 30s; -webkit-animation-play-state: paused; -webkit-transition-timing-function: all ease-in-out; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; }

.animation { -webkit-animation-play-state: running; }

```

Answer 1


As you were assigning class once transition ends, the existing class css property that takes priority over.

You can make it override them using the !important keyword.

Fiddle here

document.getElementById("design").addEventListener("webkitAnimationEnd", animation);

function animation() {
  "use strict";
  document.getElementById("profile").classList.add("animation");
}
#design {
  position: relative;
  -webkit-animation: design;
  -webkit-animation-play-state: running;
  -webkit-animation-duration: 3s;
  -webkit-transition-timing-function: all ease-in-out;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  z-index: 8;
}
/* Profile */

#profile {
  position: relative;
  -webkit-animation: profile;
  -webkit-animation-duration: 3s;
  -webkit-animation-play-state: paused;
  -webkit-transition-timing-function: all ease-in-out;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
}
.animation {
  -webkit-animation-play-state: running!important;
}
@-webkit-keyframes design {
  10%, 90% {
    -webkit-opacity: 1;
  }
  0%,
  100% {
    -webkit-opacity: 0;
  }
}
/*  Profile: (Animation) */

@-webkit-keyframes profile {
  10%, 90% {
    -webkit-opacity: 1;
  }
  0%,
  100% {
    -webkit-opacity: 0;
  }
}
<div id="design">Design</div>
<div id="profile">profile</div>