Css rotate element 360 back and forth

Question

As the question says I'd like to rotate an icon 360 degrees one way the rotate back the other repeatedly. Going one direction is easy enough what I don't understand is stopping and going the other direction.

#loading {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
from {
    -webkit-transform: rotate(0deg);
    }
to {
    -webkit-transform: rotate(359deg);
}
}

<i id="loading" class="material-icons">autorenew</i>

I have tried creating another rotation going the other direction but it doesn't seem to apply.

@-webkit-keyframes rotationBackwards {
from {
    -webkit-transform: rotate(359deg);
    }
to {
    -webkit-transform: rotate(0deg);
}
}

Solution 1

Transformation doesn't apply on inline elements. You have to make your element a block-level element instead (See Transformable Elements on the specifications - If you include the Martial Icons, this will be set by default).

The Animation itself can simply be done with a rotation to 360 degrees for the first half (50%) and a rotation back to 0 degrees for the second half. Mind that the duration of the animation splits into both directions (given your 2s animation, every direction will take 1s).

#loading {
  display: inline-block;
  animation: rotation 2s infinite linear;
}

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

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i id="loading" class="material-icons">autorenew</i>

Solution 2

Here is another idea by simply using alternate value of animation-direction and by keeping your initial animation:

#loading {
  animation: rotation 2s infinite linear alternate;
}

@keyframes rotation {
  /*from {
    transform: rotate(0deg); no needed to define this
  }*/
  to {
    transform: rotate(360deg);
  }
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i id="loading" class="material-icons">autorenew</i>