Posted By

ryanfiorini on 04/13/12


Tagged

rotation animation CSS3 linear


Versions (?)

CSS3 Only - Small Sphere Following Larger Circular Track


 / Published in: CSS
 

URL: http://jsfiddle.net/ryanwfiorini/SM9r4/

  • This will not work in IE.
  1. <style>
  2. #outerCircle {
  3. height:300px;
  4. width:300px;
  5. background-color:#fff;
  6. -webkit-border-radius: 200px;
  7. -moz-border-radius: 200px;
  8. border-radius: 200px;
  9. border:3px solid gray;
  10. -webkit-animation-duration:5s;
  11. -webkit-animation-iteration-count:infinite;
  12. -webkit-animation-timing-function:linear;
  13. -webkit-animation-name:spin;
  14. position:relative;
  15. top:30px;
  16. left:30px;
  17. }
  18.  
  19. #innerCircle {
  20. height:30px;
  21. width:30px;
  22. background-color:#000;
  23. -webkit-border-radius: 15px;
  24. -moz-border-radius: 15px;
  25. border-radius: 15px;
  26. position:relative;
  27. top:26px;
  28. left:26px;
  29. }
  30.  
  31. @-webkit-keyframes spin {
  32. from {
  33. -moz-transform:rotate(0deg);
  34. -webkit-transform:rotate(0deg);
  35. -o-transform:rotate(0deg);
  36. -ms-transform:rotate(0deg);
  37. transform:rotate(0deg) ;
  38. }
  39. to {
  40. -moz-transform:rotate(360deg);
  41. -webkit-transform:rotate(360deg);
  42. -o-transform:rotate(360deg);
  43. -ms-transform:rotate(360deg);
  44. transform:rotate(360deg) ;
  45. }
  46. }
  47.  
  48. .background {
  49. border:1px solid #000;
  50. background: #d0e4f7; /* Old browsers */
  51. background: -moz-linear-gradient(-45deg, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); /* FF3.6+ */
  52. background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#d0e4f7), color-stop(24%,#73b1e7), color-stop(50%,#0a77d5), color-stop(79%,#539fe1), color-stop(100%,#87bcea)); /* Chrome,Safari4+ */
  53. background: -webkit-linear-gradient(-45deg, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Chrome10+,Safari5.1+ */
  54. background: -o-linear-gradient(-45deg, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Opera 11.10+ */
  55. background: -ms-linear-gradient(-45deg, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* IE10+ */
  56. background: linear-gradient(-45deg, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* W3C */
  57. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  58. }
  59. </style>
  60.  
  61. <div id="outerCircle">
  62. <div id="innerCircle" class="background">
  63. </div>
  64. </div>

Report this snippet  

You need to login to post a comment.