Question

更新：

我更改了此动画声明而非animation: rotate linear infinite;没有效果（网站已上传，您可以在下面看到直播链接）

.initialLoader, .initialLoader:before, .initialLoader:after {
  position: absolute;
  border: 3px solid transparent;
  border-top: 3px solid white;
  border-radius: 50%;

    -webkit-animation-name: rotate;
    -webkit-animation-duration: 1.05s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    animation-name: rotate;
    animation-duration: 1.05s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

 content: '';
}

我对CSS中的转换和转换不太熟悉，所以我有这个问题：

如果你从任何浏览器打开www.germanalvarez.net/5，你会看到圆形条加载动画（命名为rotate），然后是另一个智能光标脉冲动画（命名为pulse）。

这两款都可以在Chrome和Firefox上运行，但是第一款不适用于我的Android（Galaxy GT-I9300（机器人4.3），如果我通过我的移动设备访问该网站，它只是动画，但第二个就是。我无法找到bug的位置。

www.germanalvarez.net/5

中的现场演示

HTML：

<div class="initialLoader"></div>
<div class="initialHi"><div class='initialAnimation'><ul class='letters'></ul><div class='cursor'></div></div></div>

CSS：

.initialLoader, .initialLoader:before, .initialLoader:after {
  position: absolute;
  border: 3px solid transparent;
  border-top: 3px solid white;
  border-radius: 50%;
     -webkit-animation: rotate linear infinite;
      -moz-animation: rotate linear infinite;
   -ms-animation: rotate linear infinite;
   -o-animation: rotate linear infinite;
  animation: rotate linear infinite;

     -webkit-animation-duration: 1.05s;
-moz-animation-duration: 1.05s;
   -ms-animation-duration: 1.05s;
   -o-animation-duration: 1.05s;
   animation-duration: 1.05s;
 content: '';
}

.initialLoader {
  height: 100px;
  width: 100px;
     position:absolute;
   margin: -50px 0 0 -50px;
   top:50%;
   left:50%;
      -webkit-animation-duration: 1.05s;
    -moz-animation-duration: 1.05s;
   -ms-animation-duration: 1.05s;
   -o-animation-duration: 1.05s;
   animation-duration: 1.05s;
}

.initialLoader:before {
  height: 75px;
  width: 75px;
  top: 10px;
  left: 10px;
     -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
   -ms-animation-duration: 10s;
   -o-animation-duration: 10s;
   animation-duration: 10s;


}

.initialLoader:after {
  height: 50px;
  width: 50px;
  top: 22px;
  left: 22px;
     -webkit-animation-duration: 4s;
  -moz-animation-duration: 4s;
   -ms-animation-duration: 4s;
   -o-animation-duration: 4s;
   animation-duration: 4s;


}
@-webkit-keyframes rotate {
  from {   -webkit-transform: rotateZ(360deg);  }
  to {    -webkit-transform: rotateZ(0deg);  }
}


@keyframes rotate {
  from {    transform: rotateZ(360deg);  }
  to {    transform: rotateZ(0deg);  }
}



.initialAnimation{
   font-family: 'Electrolize',Arial;
   color:white;
   cursor:pointer;
   font-size:1.3em;
   text-shadow: 0px 0px 10px rgba(255,255,255,0.5);
}


.initialHi{
      position:absolute;
   margin: -15px 0 0 -60px;
width:120px; height:auto;
top:50%;
   left:50%;


}

.cursor{
   opacity:0;
  display: inline-block;
  width: 6px;
  height: 1.3em;
  background-color:white;
  margin-top: -6px; 
  background: rgba(255,255,255,0.9);
  box-shadow: 0px 0px 10px rgba(255,255,255,0.5);
     -moz-animation: appear 0.1s linear 1 normal;
   -webkit-animation: pulse  0.4s linear infinite normal;
   -ms-animation: pulse  0.4s linear infinite normal;
   -o-animation: pulse  0.4s linear infinite normal;
   animation: pulse  0.4s linear infinite  normal;

  }




@-webkit-keyframes pulse {
  0% {    background: rgba(255,255,255,0.9);    box-shadow: 0px 0px 40px 2px rgba(105,135,255,1);  }
  100% {    background: rgba(255,255,255,0);    box-shadow: 0px 0px 30px 2px rgba(105,135,255,0.3);  }
}

@keyframes pulse {
  0% {    background: rgba(255,255,255,0.9);    box-shadow: 0px 0px 40px 2px rgba(105,135,255,1);  }
  100% {    background: rgba(255,255,255,0);    box-shadow: 0px 0px 30px 2px rgba(105,135,255,0.3);  }
}

转换不适用于Android

0 个答案: