CSS endless rotation animation

HTML

Press "Ctrl + Enter" to see in full screen

CSS

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -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;
  /* optional if it needed for svg animations or other */
  /* transform-origin: 85px 320px; */
}

Press "Ctrl + Enter" to see in full screen

JavaScript / jQuery

Press "Ctrl + Enter" to see in full screen

Watch live

Details

Author: djalho

Created: 10 December 2020

Last edition: 10 December 2020

English

Spanish

Apache

Bootstrap 4

CSS3

Git

JavaScript

jQuery

Laravel

MySQL

PHP

ReactJS

SVG

Terminal

CSS endless rotation animation

HTML

CSS

JavaScript / jQuery

Details

Comments (0)