Chrome开发人员工具中的控制台未显示任何错误,div已加载,但动画播放状态仍处于暂停状态-我在做什么错?

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

最佳答案

在过渡结束后分配类时,优先于现有类css属性。
  
  您可以使用!important关键字使其覆盖它们。


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>

07-24 09:47
查看更多