Experiment Loading Animation CSS3

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.


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;}
}


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

3 comments:

  1. mass tolong perjelas donk masang HTML-nya plzzz =( =( =( =( =( \o/

    ReplyDelete
  2. bro efeknya keren ni , cuma saya gak pandai cara buat cssnya bekerja :/ saya udah coba link di atas untuk tutor tapi tetap gk work . Mohon bantuannya

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top