html - 其他浏览器中的 CSS 错误

Question

我使用来自 here 的 CSS 代码对于我的网站加载器。我在使用 IE 和 Mozilla 时遇到问题，一切看起来和工作方式都不正常。

在 IE 中没有动画并且图形中断，在 Mozilla 中没有动画并且图形看起来也不正确。

@bg: #2c3e50;

/*.triangle(@triangle: border-left: 60px solid transparent; 
                     border-right: solid transparent; 
                     border-top: 0 solid transparent;);*/ 



body{
  background: @bg;
}

.loader {
  border-radius: 50%;
  margin: 0 auto;
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  height: 50px;
  width: 50px;
}

.tri {
  animation: translateRotation 1.5s infinite reverse;
  -webkit-animation: translateRotation 1.5s infinite reverse;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-top: 0 solid transparent;
  border-bottom: 60px solid #00b4ff;
  width: 0px;
  z-index: 2;
}

.tri2 {
  animation: translateRotation 1.5s infinite;
  -webkit-animation: translateRotation 1.5s infinite;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 0px solid transparent;
  border-bottom: 40px solid #ffde15;
  width: 0px;
  z-index: 1;
}

.tri3 {
   animation: translateRotation 1.5s infinite;
  -webkit-animation: translateRotation 1.5s infinite;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 40px solid #1da158;
  border-bottom: 0px solid transparent;
  width: 0px;
  z-index: 1;
}

.tri4 {
   animation: translateRotation 1.5s infinite reverse;
  -webkit-animation: translateRotation 1.5s infinite reverse;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-top: 60px solid #ea343f;
  border-bottom: 0px solid transparent;
  width: 0px;
  z-index: 2;
}

.circ { 
  border: 30px solid rgba(255,255,255,0.1);
}

.circ2 { 
  border: 25px solid rgba(255,255,255,1);
  box-sizing: border-box;
  box-shadow: 0 2px 1px rgba(0,0,0, 0.15), 0 -2px 1px rgba(0,0,0, 0.15), -2px 0 1px rgba(0,0,0, 0.15), 2px 0 1px rgba(0,0,0, 0.15);
  margin-top: 30px;
  z-index: 90;
}
/* ANIMATE */

@-webkit-keyframes translateRotation {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg);}
}

Answer 1

问题是您只使用了 @-webkit-keyframes 而不是 @keyframes 和 -webkit-transform 而不是 transform 从 IE10+ 开始支持无前缀

您应该将这段代码添加到您的动画关键帧之上，并且应该适用于 IE10+:

@keyframes translateRotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg);}
}

在这里查看 keyframe-animation-syntax查看所有前缀。

对于 IE9 你可能应该使用像 jQuery/jQueryUI 这样的 Javascript 动画，你可以检查是否有必要使用 Modernizr

if(!Modernizr.cssanimations) {
    // Fallback 
}