Membuat Efek Animasi Loading Sederhana dengan CSS3 Animasi

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

Download Files