CSS Spin - Membuat Baling-baling Menggunakan CSS

CSS Spin - Membuat Baling-baling Menggunakan CSS

Kali ini ane mau share trik CSS Spin / rotate, seperti artinya CSS Spin Adalah CSS berputar, tuturial kali ini adalah salah satu contoh dari dari dasar membuat CSS Animation, dan bisa di kembangkan lebih dari yang saya share pada tutorial ini

CSS

.Spinners {
   background-color: rgb(110, 133, 195);
   border: 5px solid rgba(155, 167, 167, 0.9);
   border-radius: 50px;
   box-shadow: 0 0 35px #f5b000;
   width: 10px;
   height: 120px;
   margin: 0 auto;
   -moz-animation: spin .6s infinite linear;
   z-index: 2500;
   -webkit-animation: spin .2s infinite linear;
   position: relative;
}

.Spinners-hold {
   background-color: rgb(191, 191, 183);
   border-bottom: 5px solid rgba(250, 251, 252, 0.9);
   border-top: 5px solid rgb(251, 0, 0);
   border-left: 5px solid rgb(47, 27, 27);
   border-right: 5px solid #2fff00;
   border-radius: 50px;
   box-shadow: 0 0 15px #7A7C7E;
   width: 20px;
   height: 20px;
   margin: 0 auto;
   position: relative;
   top: -80px;
   -moz-animation: spinoff .6s infinite linear;
   -webkit-animation: spinoff .3s infinite linear;
   z-index: 2500;
   position: relative;
}

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

@-moz-keyframes spinoff {
   0% {
      -moz-transform: rotate(0deg);
   }
   100% {
      -moz-transform: rotate(-360deg);
   }
}

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

@-webkit-keyframes spinoff {
   0% {
      -webkit-transform: rotate(0deg);
   }
   100% {
      -webkit-transform: rotate(-360deg);
   }
}

HTML

<div class="Spinners"></div>
<div class="Spinners-hold"></div>