Mecha versi 2.6.4 sudah dirilis!

Membuat Efek Animasi Loading Sederhana dengan CSS3 Animasi

Tabel Konten
  1. Metode 1: Menggunakan Efek Transparasi 
  2. Metode 2: Menggunakan Transformasi Translate 
  3. Metode 3: Menggunakan Durasi Animasi yang Berbeda-Beda 
CSS3 Animated Loading

Di sini Saya menggunakan CSS3 translate, transformasi dan transparasi. Yang pertama harus Anda lakukan adalah membangun frame animasi. Kemudian, cukup panggil setiap efek animasi yang Anda buat ke elemen-elemen yang Anda inginkan. Saya pikir metode ini jauh lebih aman dibandingkan dengan metode animasi loading pembukaan halaman menggunakan JavaScript.

Metode 1: Menggunakan Efek Transparasi 

/* Declare the element dimension. These are just examples. You can use all elements that already on the website */
#box1 {
  width:300px;
  height:300px;
  background-color:#000;
  margin:0 auto;
}

/* Step 1: Build the Animation */
@-webkit-keyframes aniload {
  from {opacity:0}
  to   {opacity:1}
}

@-moz-keyframes aniload {
  from {opacity:0}
  to   {opacity:1}
}

@-ms-keyframes aniload {
  from {opacity:0}
  to   {opacity:1}
}

@-o-keyframes aniload {
  from {opacity:0}
  to   {opacity:1}
}

@keyframes aniload {
  from {opacity:0}
  to   {opacity:1}
}

/* Step 2: Call the Animation */
#box1 {
  -webkit-animation:aniload 4s;
  -moz-animation:aniload 4s;
  -ms-animation:aniload 4s;
  -o-animation:aniload 4s;
  animation:aniload 4s;
}

Lihat Demo

Metode 2: Menggunakan Transformasi Translate 

/* Declare the element dimension */
#box1 {
  width:300px;
  height:300px;
  background-color:#000;
  margin:0 auto;
}

/* Step 1: Build the Animation */
@-webkit-keyframes aniload {
  from {-webkit-transform:translate(0px, 1000px)}
  to   {-webkit-transform:translate(0px, 0px)}
}

@-moz-keyframes aniload {
  from {-moz-transform:translate(0px, 1000px)}
  to   {-moz-transform:translate(0px, 0px)}
}

@-ms-keyframes aniload {
  from {-ms-transform:translate(0px, 1000px)}
  to   {-ms-transform:translate(0px, 0px)}
}

@-o-keyframes aniload {
  from {-o-transform:translate(0px, 1000px)}
  to   {-o-transform:translate(0px, 0px)}
}

@keyframes aniload {
  from {transform:translate(0px, 1000px)}
  to   {transform:translate(0px, 0px)}
}

/* Step 2: Call the Animation */
#box1 {
  -webkit-animation:aniload 4s;
  -moz-animation:aniload 4s;
  -ms-animation:aniload 4s;
  -o-animation:aniload 4s;
  animation:aniload 4s;
}

Lihat Demo

Metode 3: Menggunakan Durasi Animasi yang Berbeda-Beda 

Masih sama persis dengan metode ke dua, hanya saja di sini Saya menggunakan durasi animasi yang berbeda-beda pada setiap elemen:

/* Declare the element dimension */
.box {
  width:300px;
  height:300px;
  background-color:#000;
  margin:0 auto;
}

/* Step 1: Build the Animation */
@-webkit-keyframes aniload {
  from {-webkit-transform:translate(0px, 1000px)}
  to   {-webkit-transform:translate(0px, 0px)}
}

@-moz-keyframes aniload {
  from {-moz-transform:translate(0px, 1000px)}
  to   {-moz-transform:translate(0px, 0px)}
}

@-ms-keyframes aniload {
  from {-ms-transform:translate(0px, 1000px)}
  to   {-ms-transform:translate(0px, 0px)}
}

@-o-keyframes aniload {
  from {-o-transform:translate(0px, 1000px)}
  to   {-o-transform:translate(0px, 0px)}
}

@keyframes aniload {
  from {transform:translate(0px, 1000px)}
  to   {transform:translate(0px, 0px)}
}

/* Step 2: Call the Animation */
#box1 {
  -webkit-animation:aniload 4s;
  -moz-animation:aniload 4s;
  -ms-animation:aniload 4s;
  -o-animation:aniload 4s;
  animation:aniload 4s;
}

#box2 {
  -webkit-animation:aniload 1s;
  -moz-animation:aniload 1s;
  -ms-animation:aniload 1s;
  -o-animation:aniload 1s;
  animation:aniload 1s;
}

#box3 {
  -webkit-animation:aniload 5s;
  -moz-animation:aniload 5s;
  -ms-animation:aniload 5s;
  -o-animation:aniload 5s;
  animation:aniload 5s;
}

#box4 {
  -webkit-animation:aniload 3s;
  -moz-animation:aniload 3s;
  -ms-animation:aniload 3s;
  -o-animation:aniload 3s;
  animation:aniload 3s;
}

#box5 {
  -webkit-animation:aniload 2s;
  -moz-animation:aniload 2s;
  -ms-animation:aniload 2s;
  -o-animation:aniload 2s;
  animation:aniload 2s;
}

Lihat Demo

12 Komentar

Unknown

kirain tadi animasi loading,

Unknown

nice sharo bloging walking

Crypto

Salam kenal Bang,bang klo penempatan kode tersebut apabila mau masuk blog,kaya blog punya abang gimana ya?Terima kasih

Taufik Nurrohman

@Crypto Salam kenal juga. Jadi, konsepnya begini: Di sini kita membangun animasi, kemudian kamu bisa melihat bahwa Saya memanggil animasi pada elemen #box1, #box2, #box3, dst. Nah, gampangnya, kalau ingin menerapkan efeknya di blog saat masuk ya tinggal diterapkan pada elemen yang diinginkan yang ada di dalam blog. Misalnya begini:

body {
-webkit-animation:aniload 2s;
-moz-animation:aniload 2s;
-ms-animation:aniload 2s;
animation:aniload 2s;
}

Coba terapkan cara ini dulu, nanti kalau sudah mengerti lebih jauh bisa dimodifikasi lagi dan diatur order animasinya.

Unknown

mas cara coba cara ini ko tetep ga bisa ya mas?? tetep ga ada perubahan mas, bisa tolong...

Xjoker

mantep nih yang saya tunggu \o/

Unknown

Keren nih mas Taufik :-bd , Ada yang lain lagi ga mas :p

Komentar telah ditutup.