Experiment Loading Animation CSS3

Under88 Real Post At CSS3 Animation

Experiment Loading Animation CSS3 Blogger

Assalamuallaikum Wr.Wb
Under88 , Sambil minum kopi dan sebatang rokok yang tengah menemani indahnya pagi ini saya selagi sedang santai dan tak ada kerjaan. Tanpa sengaja saya melihat artikel animasi loading CSS3 di red-team-design.com dan menurut saya ini cukup menarik untuk di pelajari. dan lain waktu saya akan membuat experiment ini di pasang di blogger blogspot. Ya tentu saja saya harus memasang di blogger.karena Under88 Adalah Tutorial blogger | Tutorial Template.

Jadi, dalam artikel ini Anda akan melihat sebuah percobaan tentang cara membuat Animasi CSS3 pemuatan sederhana.

View Page Demo

Untuk contoh ini, saya akan menggunakan dua CSS3 animasi: satu yang memudar warna untuk segitiga dan satu animasi yang berputar seluruh desain. Kedua animasi, disinkronkan, akan membantu menciptakan efek cukup bagus.

HTML

Awalnya, saya ingin menggunakan pseudo-elemen untuk memiliki elemen markup. Tapi, hal ini membuat animasi tidak berjalan sesuai kegunaanya selain penggunaan Browser Mozilla Firefox.

Berikut adalah cara markup terlihat seperti:

<div class="loading-wrap">
  <div class="triangle1"></div>
  <div class="triangle2"></div>
  <div class="triangle3"></div>
</div>

CSS

Ada beberapa hal Anda mungkin menemukan menarik di sini:

• Untuk memudar warna yang bagus di ketiga segitiga, Anda perlu untuk kenaikan animasi-delay.
• Perhatikan kesenjangan antara 20% dan 100% untuk keyframes rotasi. Hal ini membantu menambahkan efek atap untuk animasi.

.loading-wrap {
  width: 60px; height: 60px;
  position: absolute;
  top: 50%; left: 50%;
  margin: -30px 0 0 -30px;
  background: #777;
  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: #67cbf0;
  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);}
    20% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}
@keyframes fadecolor {
    0% {border-bottom-color: #eee;}
    100%{border-bottom-color: #67cbf0;}
}

View Page Demo

kesimpulan

Ini adalah eksperimen dan Anda harus menyadarinya. Untuk saat ini, saya pikir animasi GIF akan melakukan pekerjaan lebih baik di sebagian besar kasus.

Juga, bahwa ini bukan contoh yang menganjurkan untuk hal menggunakan CSS3, bukan gambar untuk menyimpan permintaan HTTP. Hal ini tidak berlaku di sini sebagai dukungan browser terbatas untuk animasi CSS3. Meskipun, saya harap Anda akan menemukan contoh ini berguna dan inspiratif untuk proyek-proyek masa depan Anda.

Terima kasih untuk membaca dan saya tak sabar untuk membaca pendapat Anda!
Wassalamuallaikum Wr.Wb
sumber