我有一个CSS§动画,实际上是3个动画元素。所有动画都是在页面加载时开始的。
他们这样做 - 除非鼠标指针在窗口内。只有第三个元素(#startheader)被动画延迟,就像它应该的那样。
直到现在,我在Chrome和Safari Windows中都会发生这种情况。 Opera IE和Edge不会显示此行为。
这是CSS:
#hg {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#FFF;
overflow:hidden;
-webkit-box-shadow: 0 2px 3px 1px rgba(0,0,0,0.3);
box-shadow: 0 2px 3px 1px rgba(0,0,0,0.3);
z-index:2;
animation-name:scontan;
animation-delay:5s;
animation-duration:4s;
animation-iteration-count: 1;
animation-fill-mode:forwards;
animation-timing-function: ease-in-out;
-webkit-animation-name:scontan;
-webkit-animation-delay:5s;
-webkit-animation-duration:4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode:forwards;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes scontan {
from {
height:100%;
}
to {
height:92px;
}
}
@-webkit-keyframes scontan {
from {
height:100%;
}
to {
height:92px;
}
}
#doedel {
position:absolute;
top:0;
left:20%;
transform:translateY(0);
-webkit-transform:translateY(0);
width:58%;
animation-name:scontan2;
animation-delay:5s;
animation-duration:4s;
animation-iteration-count: 1;
animation-fill-mode:forwards;
animation-timing-function: ease-in-out;
animation-state:running;
-webkit-animation-name:scontan2;
-webkit-animation-delay:5s;
-webkit-animation-duration:4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode:forwards;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-state:running;
}
@keyframes scontan2 {
from {
transform:translateY(0);
}
to {
transform:translateY(-20%);
}
}
@-webkit-keyframes scontan2 {
from {
-webkit-transform:translateY(0);
}
to {
-webkit-transform:translateY(-20%);
}
}
#startheader {
position:absolute;
top:0;
left:0;
height:92px;
width:100%;
background:rgba(255,255,255,0.8);
opacity:0;
z-index:3;
animation-name:scontan3;
animation-delay:9s;
animation-duration:4s;
animation-iteration-count: 1;
animation-fill-mode:forwards;
animation-timing-function: ease-in-out;
-webkit-animation-name:scontan3;
-webkit-animation-delay:9s;
-webkit-animation-duration:4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode:forwards;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes scontan3 {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes scontan3 {
from {
opacity:0;
}
to {
opacity:1;
}
}
想法,有人吗?谢谢!