CODEWITHSUNDEEP
htmlcssrotationcss-animations
user9272479
user9272479

Reputation:

Css rotate element 360 back and forth

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

Upvotes: 9

Views: 21056

Answers (2)

Temani Afif
Temani Afif

Reputation: 274024

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>

Upvotes: 8

andreas
andreas

Reputation: 16936

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>

Upvotes: 13

Related Questions