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

  • Musa Khairul Umam

    Keren bang,sangat bermanfaat

  • 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...

  • Surga Kenari

    keren langsung saya terapkan :-bd

  • debbie irlando manurung

    btw, element nya berantakan ya mas kalau menggunakan efek ini.. hmmm aeeehh

  • Unknown

    efeknya ga bisa digabung ya..
    misalnya saya menggunakan efek transparancy dengan transform....

  • Xjoker

    mantep nih yang saya tunggu \o/

  • Unknown

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

Komentar telah ditutup.