[ 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>