Masukkan Email anda untuk berlangganan Devaradise. Gratis!

Mengenal & Membuat Animasi CSS3 di Website/Blog

Dulu, untuk membuat animasi dalam sebuah website, setidaknya kita harus menguasai pembuatan file flash. Namun, seiring dengan kemajuan teknologi web, flash mulai ditinggalkan karena ada teknologi baru yaitu CSS3 yang juga bisa digunakan untuk membuat animasi di web. Alasan CSS3 lebih disukai adalah karena lebih mudah dibuat, lebih ringan, dan lebih canggih jika kita menggabungkannya dengan jquery dan HTML5.

Animasi CSS3

Mengenal CSS3 Animations

Animasi dengan CSS 3 dibuat dengan aturan ‘@keyframes’. Konsepnya adalah kita membuatnya dulu @keyframes dengan nama tertentu, lalu menggunakannya pada elemen dengan selector tertentu. Untuk lebih jelasnya, lihat dibawah ini :

@keyframes ini-nama-animasinya {
from{background:red;}
to{background:green;}
}
.selector {
animation:ini-nama-animasinya 1s linear;
}

Selain menggunakan ‘from’ dan ‘to’, anda juga bisa menggunakan persen dari 0% – 100%. Misal :

0% {background:red}
10% {background:green}
30% {background:blue}
60% {background:yellow}
100% {background:purple}

Sementara, penggunaan pada .selector-nya, anda bisa menambahkan beberapa properti css3 animation yang lain. Berikut ini daftar properti animasi CSS3 yang bisa anda gunakan.

PropertyDescriptionContoh Penggunaan
@keyframesUntuk membuat sebuah animasi –
animationProperti ini bisa digunakan untuk menampung semua nilai properti dibawah, kecuali untuk nilai properti animation-play-state dan animation-fill-mode.animation:nama-animasi 3s linear;
animation-delayMenentukan kapan (pada detik keberapa setelah halaman di load) animasi akan dimulaianimation-delay:1s;
animation-directionMenentukan apakah animasinya berjalan secara terbalik atau tidak.
animation-durationMenentukan berapa detik atau milidetik sebuah animasi berjalananimation-duration:0.9s;
animation-fill-modeMenentukan style sebuah elemen ketika animasinya sudah selesai atau sebelum animasinya berjalan (delay)
animation-iteration-countMenentukan berapa kali animasi berjalan.animation-iteration-count:3;
animation-nameMenentukan Nama dari animasi yang dibuat dengan @keyframeanimation-name:nama-animasi;
animation-play-stateMenentukan apakah animasi berjalan(“runnning”) atau terjeda(“pause”)animation-play-state:running;
animation-timing-functionMenentukan bagaimana animasi berjalan lewat waktuanimation-timing-function:linear;

Browser Support

Yap, sebelum kita melanjutkannya lebih jauh, kita harus mengetahui terlebih dahulu browser apa saja yang mendukung animasi CSS3 ini. Anda bisa lihat pada gambar dibawah.

browser Support animasi CSS3

Untuk browser-browser tertentu, penggunaan properti animation harus diawali dengan prefix tertentu misalnya untuk mozilla, anda harus menulis -moz-animation-name:nama-animasi;

Contoh Penggunaan : Cara Membuat Animasi Bergerak dan Ganti Warna

Tidak lengkap rasanya jika sebuah teori tidak disertai dengan praktek. So, saya akan buat contoh penggunaan animasinya. Disini saya akan buat animasi yang bergerak-gerak dan berganti warna tanpa batas waktu. Bisa anda download juga kok :).

Kode HTML

<div class=”animasi”>
Cukup gini aja HTML-nya mah, Nanti edit-edit aja ndiri. Bisa pakai gambar, tabel, tag lain atau apapun yang mau dijadikan konten :v.
</div>

Kode CSS

/*Buat animasinya dengan @keyframes*//*standar*/
@keyframes nama-animasi {
0%{background-color: #652ae6;margin-left:0;}
25%{background-color: #187641;margin-left: 30px;}
50%{background-color: #398477;margin-left:70px;}
75%{background-color: #162536;margin-left:30px;}
100%{background-color: #293487;margin-left:0px;}
}

/*Chrome, Safari, Opera*/
@-webkit-keyframes nama-animasi {
0%{background-color: #652ae6;margin-left:-10px;}
25%{background-color: #187641;margin-left: 30px;}
50%{background-color: #398477;margin-left:70px;}
75%{background-color: #162536;margin-left:30px;}
100%{background-color: #293487;margin-left:-10px;}
}

/*Mozilla*/
@-moz-keyframes nama-animasi {
0%{background-color: #652ae6;margin-left:-10px;}
25%{background-color: #187641;margin-left: 30px;}
50%{background-color: #398477;margin-left:70px;}
75%{background-color: #162536;margin-left:30px;}
100%{background-color: #293487;margin-left:-10px;}
}

.animasi {
width:600px;
padding:20px;
font-size: 20px;
color:#fff;
text-align: center;

/* Gunakan animasi*/


/* Chrome, Safari, Opera */
-webkit-animation-name: nama-animasi;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;

/* Mozilla */
-moz-animation-name: nama-animasi;
-moz-animation-duration: 2s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;

/* Standar */
animation-name: nama-animasi;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;/* Sebenarnya, penggunaan animasinya bisa ditulis begini juga :

-webkit-animation:nama-animasi 3s linear 2s infinite alternate;
-moz-animation:nama-animasi 3s linear 2s infinite alternate;
animation:nama-animasi 3s linear 2s infinite alternate;

Dengan catatan kita harus menghapal urutannya, Durasi dan Delay tidak boleh tertukar.
*/

}

Dan ini dia demonya :

Cukup gini aja HTML-nya mah, Nanti edit-edit aja ndiri. Bisa pakai gambar, tabel, tag lain atau apapun yang mau dijadikan konten :v.

 

Untuk download demonya, bisa klik disini.

Atau, anda juga bisa lihat penggunaan efek animasi css3 lainnya di tutorial saya yang lain :

Multi Level Dropdown Menu dengan animasi CSS3

Bagaimana ? Punya trik lain tentang animasi CSS3, jangan ragu untuk share juga di komentar. Mari kita berbagi ilmu :). Jangan lupa datang lagi hari kamis depan untuk mendapatkan tutorial desain web lainnya. Semoga bermanfaat.

~Muhammad Syakirurohman~

Referensi : www.w3schools.com

10 thoughts on “Mengenal & Membuat Animasi CSS3 di Website/Blog

Tinggalkan Balasan