Question

我在我的网页上使用了这个代码，它在Chrome和Safari中运行良好，但在IE和Mozilla中，它很冷，不起作用。我怎么能解决这个问题？

http://codepen.io/jeyachanthuruj/pen/Cihsp

HTML：

<div class="loader">
    <div class="spin"></div>
</div>

CSS：

.loader{
  height:80px;
  width:80px;
  position:relative;
  margin:100px auto;

  .spin {
    height:80px;
    width:80px;
    -webkit-animation:myspin 1s ease infinite;

    &, &:before {
      box-sizing:border-box;
      border:5px solid blue;
      border-left-color:#3369E8;
      border-top-color:#D50F25;
      border-right-color:#009925;
      border-bottom-color:#EEB211;
      border-radius:50%;
      position:absolute;
      display:block;

    }

    &:before{
      content:" ";
      left:50%;
      top:50%;
      height:96px;
      width:96px;
      margin:-48px;
      border-width:6px;
      border-left-color:rgba(0,0,0,0);
      border-right-color:rgba(0,0,0,0);
      border-top-color:rgba(0,0,0,0);
      border-bottom-color:rgba(0,0,0,.2);
      opacity:1;
      -webkit-animation:myspin 1s reverse ease infinite;
    }
  }
}

@-webkit-keyframes myspin {
  from {
    -webkit-transform:rotate(0deg);
  }

  to {
    -webkit-transform:rotate(360deg);
  }
}

Answer 1

你只使用-webkit-animation，IE和Mozilla不要使用这个CSS3属性。您应该将-moz-animation用于Mozilla，将animation用于IE。查看this link。

Answer 2

请参阅更新codepen适用于IE here

.loader{
  height:80px;
  width:80px;
  position:relative;
  margin:100px auto;

  .spin {
    height:80px;
    width:80px;
    -webkit-animation:myspin 1s ease infinite;
    animation:myspin 1s ease infinite;

    &, &:before {
      box-sizing:border-box;
      border:5px solid blue;
      border-left-color:#3369E8;
      border-top-color:#D50F25;
      border-right-color:#009925;
      border-bottom-color:#EEB211;
      border-radius:50%;
      position:absolute;
      display:block;

    }

    &:before{
      content:" ";
      left:50%;
      top:50%;
      height:96px;
      width:96px;
      margin:-48px;
      border-width:6px;
      border-left-color:rgba(0,0,0,0);
      border-right-color:rgba(0,0,0,0);
      border-top-color:rgba(0,0,0,0);
      border-bottom-color:rgba(0,0,0,.2);
      opacity:1;
      -webkit-animation:myspin 1s reverse ease infinite;
      animation:myspin 1s reverse ease infinite;
    }
  }
}

@-webkit-keyframes myspin {
  from {
    -webkit-transform:rotate(0deg);
  }

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

  to {
    transform:rotate(360deg);
  }
}

Loader CSS适用于Chrome和Safari，而不适用于IE或Firefox

2 个答案: