Loading Animasi Dengan CSS3 Part 3 : Triangle Animation

Kali ini saya mau share mengenai bagaimana cara membuat segitiga dengan efek CSS sehingga tampilannya menjadi lebih menarik dan tentunya sesuai judulnya, animatif.

Segitiga ini sendiri dibangun pada abad ke-4 SM (weww...ngelantur...) dengan menggunakan kombinasi warna utama hitam, pink, dan ungu, sehingga selanjutnya dapat di modifikasi sesuai dengan warna yang disukai.

Artikel ini sekaligus menjadi akhir  dari trilogi "Loading Animasi Dengan CSS3" yang saya telah buat.(hahahaha... )

DEMO :

.aiizahh-loader {

  width: 60px; height: 60px;

  position: absolute;

  top: 50%; left: 50%;

  margin: -30px 0 0 -30px;

  background: #000000;      

  animation: rotation ease-in-out 2s infinite;

  border-radius: 30px;      

}



.triangle1, .triangle2, .triangle3 {

  border-width: 0 20px 30px 20px;

  border-style: solid;

  border-color: transparent;

  border-bottom-color: #D580FE;

  height: 0; width: 0;

  position: absolute;

  left: 10px; top: -10px;

  animation: fadecolor 2s 1s infinite;

}



.triangle2, .triangle3 {

  content: '';

  top: 20px; left: 30px;

  animation-delay: 1.1s;

}



.triangle3 {

  left: -10px;

  animation-delay: 1.2s;

}



@keyframes rotation {

    0% {transform: rotate(0deg);}

    50% {transform: rotate(180deg);}

    100% {transform: rotate(360deg);}

}



@keyframes fadecolor {

    0% {border-bottom-color: #FE80DF;}

    100%{border-bottom-color: #D580FE;}

}

<div class="aiizahh-loader">

  <div class="triangle1"></div>

  <div class="triangle2"></div>

  <div class="triangle3"></div>

</div>

Bagaimana, mudah bukan???

Terima kasih, dan semoga bermanfaat..

Baca Juga :
1. Membuat Efek Loading Animasi Beforeunload Untuk Blog.
2. Loading Animasi Dengan CSS3 Part 1.
3. Loading Animasi Dengan CSS3 Part 2 : Moving Ball vs Duocolour Animation.



Referensi : www.red-team-design.com