Button Spinner Works in Firefox Does Not Spin in Chrome

Question

When the button is clicked initiating an AJAX call a spinner is displayed in the button. When the AJAX call back function is complete the spinner is removed. Spins like a champ in FireFox 29, No animation in Chrome 34.0.1847.132. The icon is displayed then hidden, but does not spin.

.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 ); }
}

Thanks for looking.

Answer 1

You should add -webkit vendor prefix for animation and transform as well to make it work on Chrome and Safari. Check this article: http://css3.bradshawenterprises.com/which-vendor-prefixes-are-needed/. So, your CSS should look like:

.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 ); }
}

And a short DEMO which shows that it works only by adding -webkit vendor prefix in chrome.