css - 按钮微调器在 Firefox 中工作但在 Chrome 中不旋转

Question

当单击按钮启动 AJAX 调用时，按钮中会显示一个微调器。当 AJAX 回调函数完成时，微调器将被移除。在 FireFox 29 中像冠军一样旋转，在 Chrome 34.0.1847.132 中没有动画。图标显示然后隐藏，但不旋转。

.spinner {
  position: absolute;
  left: 2vw;
  top: 2;
  opacity: 0;
  max-width: 0;
  -webkit-transition: opacity 0.25s, max-width 0.45s;
  -moz-transition: opacity 0.25s, max-width 0.45s;
  -o-transition: opacity 0.25s, max-width 0.45s;
  transition: opacity 0.25s, max-width 0.45s; 
}

.has-spinner.active {
  cursor:progress;
}

.has-spinner.active .spinner {
  opacity: 1;
  max-width: 50px; 
}  

.icon-refresh-animate {
  animation-name: rotateThis;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotateThis {
from { transform: scale( 1 ) rotate( 0deg );   }
to   { transform: scale( 1 ) rotate( 360deg ); }
}

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

感谢您的关注。

Answer 1

您应该为 animation 和 transform 添加 -webkit 供应商前缀，以使其在 Chrome 和 Safari 上运行。查看这篇文章:http://css3.bradshawenterprises.com/which-vendor-prefixes-are-needed/ .因此，您的 CSS 应如下所示:

.icon-refresh-animate {
  -webkit-animation-name: rotateThis;
  -webkit-animation-duration: .5s;
  -webkit-animation-iteration-count: infinite;
  -webkit animation-timing-function: linear;
  animation-name: rotateThis;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

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

还有一个简短的 DEMO 这表明它只能通过在 chrome 中添加 -webkit 供应商前缀来工作。