Posted By

ryanfiorini on 04/02/12


Tagged

rotate keyframe 360


Versions (?)

Spinning Div with KeyFrames


 / Published in: CSS
 

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

This uses css3 keyframes, so IE support is limited.

  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>

Report this snippet  

You need to login to post a comment.