Infinite Rotation Animation Using CSS and JavaScript

Infinite rotation animation using CSS and Javascript

Endless rotation - CSS3 Animation property and Keyframes:

@keyframes rotate360 {
  to { transform: rotate(360deg); }
}
img { animation: 2s rotate360 infinite linear; }

<img src="https://i.stack.imgur.com/qCWYU.jpg?s=64&g=1" />

CSS endless rotation animation

Works in all modern browsers

.rotate{
 animation: loading 3s linear infinite;
 @keyframes loading {
  0% { 
    transform: rotate(0); 
  }
  100% { 
    transform: rotate(360deg);
  }
 }
}

Javascript / CSS - Rotation after CSS animation

Try this out :

var div = document.getElementById('testdiv');

document.addEventListener('keypress', function onPress(event) {
    div.style.animationPlayState = 'paused';
    div.style.animationName = 'none';

    if (event.key == 'q') {
      div.style.transform = 'rotate(-90deg)'; 
    }

    if(event.key == 'e') {
      div.style.transform = 'rotate(180deg)'; 
    }

    if(event.key == 's') {
      div.style.animationName = 'animation';
      div.style.animationPlayState = 'running';
    }
});

@keyframes animation {
    to {
        transform: rotate(15deg); 
    }
}

#testdiv {
    position: absolute;
    background-color: black;   
    margin: auto;
    margin-top: 50px;
    width: 200px;
    height: 150px;

    animation-name: animation;
    animation-duration: 1s;  
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

<div id="testdiv"></div>

How to use animation on a rotated element in CSS

Consider CSS variable to append the rotation inside the animation:

.solid {  width: 50px;  height: 50px;  display:inline-block;  border:1px solid red;}
.clock {  transform: rotate(90deg);  --d:90deg;}
/*clock-wise rotation*/
.counterclock {  transform: rotate(-90deg);  --d:-90deg;}

/*counter-clock-wise rotation*/
.ani {  animation: popit 5s linear 1 forwards;}

/*does not preserve rotation!!*/
@keyframes popit {  0% {    opacity: 0;    border-radius: 50%;  }  50% {    transform: translateX(-10%) rotate(var(--d,0deg));    border-radius: 50%;    opacity: 1;  }  100% {    opacity: 1;  }}

<div class="solid clock ani">✔</div><div class="solid counterclock ani">✔</div>

CSS3 Rotate Animation

Here is a demo. The correct animation CSS:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

CSS Animation to rotate element 360 degress on it self, rotates element around itself

You can spin the icon itself by giving it an id

<i id="cog" class="fas fa-cog fa"></i>

And then set the transform origin to the center

 #cog {
      transform-origin: center;
      animation-duration: 3s;
      animation-timing-function: linear;
      animation-delay: 0s;
      animation-iteration-count: infinite;
      animation-direction: normal;
      animation-fill-mode: none;
      animation-play-state: running;
      animation-name: cog-spin; 
}

Creating css3 infinite rotation for all major browsers

For now CSS3 is not hardware accelerated yet, at least not with the browsers you tested.
But there are several other possibilities to rotate an image besides CSS3:

• Raphaël-JavaScript Library
• Paper.js
• jQueryRotate (a jQuery-Plugin)

Those libraries work with SVG which is IMHO less cpu-consuming.
If you only want to rotate an image, you might not need the whole raphaeljs-library. In this case you should check out the specs: w3.org/TR/SVG11

Live example:
http://upload.wikimedia.org/wikipedia/commons/4/4f/Soccer_ball_animated.svg

---

Related Topics