Rulexec Rulexec - 3 months ago 13
CSS Question

How to do a webkit css endless rotation-animation.

I want to make a rotation of my loading icon by CSS.

I have an icon and the following code:

<style>
#test {
width: 32px;
height: 32px;
background: url('refresh.png');
}

.rotating {
-webkit-transform: rotate(360deg);
-webkit-transition-duration: 1s;
-webkit-transition-delay: now;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
</style>

<div id='test' class='rotating'></div>


But it doesn't work. How can the icon be rotated using CSS?

Answer
@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}