鼠标在窗口

时间:2015-08-07 11:43:23

标签: html css css3

我有一个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;
  }
}

想法,有人吗?谢谢!

0 个答案:

没有答案