Awesome Rotating Curves Using Pure CSS3

Published on October 7, 2012

Have you observe this blog logo properly. If you are visiting this site in a CSS3 support browser you can see two black curved lines will continually rotating over logo. But how many of you know it is made by using pure CSS3 . Ya We didn’t need use any flash for such effects. It’s all css3 magic. Demo

HTML We will take the following html for demonstrations. This is the same html using on this blog. A self closing div with a class name.

<div class="logocircle" />

CSS

.logocircle {
  animation: spin 1s infinite linear;
  background-color: transparent;
  border: 5px solid rgba(0, 0, 0, 0.9);
  border-left: 5px solid transparent;
  border-radius: 100px;
  border-right: 5px solid transparent;
  height: 80px;
  opacity: 0.9;
  width: 80px;
}
.logcircle:hover {
  animation: spinrev 1s infinite linear;
}

In this code we will use two animation. 1)The curves will rotate in clock wise directions. 2)When user hover the curves will rotate in anti clock wise direction. Applying CSS3 Keyframe Animations

@keyframes spinrev {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Cross browser support If you want this work in different browser you need to add browser prefix.

/* default */
@keyframes spinrev {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*webkit browsers*/
@-webkit-keyframes spinrev {
  0% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

/* firefox */
@-moz-keyframes spinrev {
  0% {
    -moz-transform: rotate(360deg);
  }
  100% {
    -moz-transform: rotate(0deg);
  }
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
/*IE9,IE10 */
@-ms-keyframes spinrev {
  0% {
    -ms-transform: rotate(360deg);
  }
  100% {
    -ms-transform: rotate(0deg);
  }
}
@-ms-keyframes spin {
  0% {
    -ms-transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
  }
}
/*Opera */
@-o-keyframes spinrev {
  0% {
    -ms-transform: rotate(360deg);
  }
  100% {
    -ms-transform: rotate(0deg);
  }
}
@-o-keyframes spin {
  0% {
    -ms-transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
  }
}

That’s it hope you like it.