Membuat Efek Animasi Loading Sederhana dengan CSS3 Animasi
Tabel Konten
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;
}
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;
}
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;
}
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: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....
Taufik Nurrohman
Bisa. Pelajari dasarnya di sini ⇒ /2011/11/perkenalan-css-animasi-keyframe.html
Xjoker
mantep nih yang saya tunggu \o/
Unknown
Keren nih mas Taufik :-bd , Ada yang lain lagi ga mas :p