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>