Loader CSS 在 Chrome 和 Safari 中工作，在 IE 或 Firefox 中不工作

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 属性。 Mozilla 应使用 -moz-animation，IE 应使用 animation。查看 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 中不工作

Loader CSS works in Chrome and Safari, not in IE or Firefox

css

mozilla

google-chrome

loader