Advanced Search

Spinning Div with KeyFrames

/ Published in: CSS
Save to your folder(s)
This uses css3 keyframes, so IE support is limited.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style>
  2. @-webkit-keyframes clock {
  3.     0% {-webkit-transform: rotate(0deg);}
  4.     100% {-webkit-transform: rotate(360deg);}
  5. }
  6.  
  7. @-moz-keyframes clock {
  8.     0% {-moz-transform: rotate(0deg);}
  9.     100% {-webkit-transform: rotate(360deg);}
  10. }
  11.  
  12. @-webkit-keyframes counter-clock{
  13.     0% {-webkit-transform: rotate(360deg);width: 85px;height: 85px;}
  14.     50% {-webkit-transform: rotate(180deg);width: 185px; height: 185px;}
  15.     100% {-webkit-transform: rotate(0deg);width: 85px;height: 85px;}
  16. }
  17. @-moz-keyframes counter-clock{
  18.     0% {-moz-transform: rotate(360deg); width: 85px;height: 85px;}
  19.     100% {-moz-transform: rotate(0deg);width: 185px;height: 185px;}
  20. }
  21.  
  22.  
  23. /* spinners */
  24. .spinner {
  25.     float: none;
  26.     position: absolute;
  27.     text-align: center;
  28.     width: 85px;
  29.     height: 85px;
  30.  
  31.     -moz-animation-timing-function: linear;
  32.     -moz-animation-iteration-count: infinite;
  33.     -moz-animation-direction: normal;
  34.     -moz-animation-delay: 0;
  35.     -moz-animation-play-state: running;
  36.     -moz-animation-fill-mode: forwards;
  37.  
  38.     -webkit-animation-timing-function: linear;
  39.     -webkit-animation-iteration-count: infinite;
  40.     -webkit-animation-direction: normal;
  41.     -webkit-animation-delay: 0;
  42.     -webkit-animation-play-state: running;
  43.     -webkit-animation-fill-mode: forwards;
  44. }
  45.  
  46.  
  47. #spinner1 {
  48.     background-color: #454545;
  49.     left: 31px;
  50.     top: 45px;
  51.  
  52.     -moz-animation-name: clock;
  53.     -moz-animation-duration: 10s;
  54.  
  55.     -webkit-animation-name: clock;
  56.     -webkit-animation-duration: 10s;
  57. }
  58.  
  59. #spinner2 {
  60.     background-color: #123123;
  61.     left: 81px;
  62.     top: 85px;
  63.  
  64.     -moz-animation-name: counter-clock;
  65.     -moz-animation-duration: 10s;
  66.  
  67.     -webkit-animation-name: counter-clock;
  68.     -webkit-animation-duration: 10s;
  69. }
  70. </style>
  71.  
  72. <div class="container">
  73.     <div class="spinner" id="spinner1"></div>
  74.     <div class="spinner" id="spinner2"></div>
  75. </div>

URL: http://jsfiddle.net/ryanwfiorini/kStWt/25/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.