Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar CSS Bagian 59 : Cara Membuat Efek Transisi Dengan CSS. Pada tutorial kali ini kita akan belajar cara membuat efek animasi dengan CSS animation.
Property CSS Animation digunakan untuk membuat animasi pada halaman web. Ini dapat digunakan sebagai pengganti animasi yang dibuat oleh Flash dan JavaScript.
Aturan CSS3 @keyframes
Animasi dibuat mengikuti aturan @keyframe. Ini digunakan untuk mengontrol langkah-langkah perantara dalam urutan animasi CSS.
Apa yang dilakukan sebuah animasi
Animasi membuat elemen berubah secara bertahap dari satu gaya ke gaya lainnya. Anda dapat menambahkan property sebanyak yang ingin Anda tambahkan.
Anda juga dapat menentukan perubahan persentase. 0% adalah nilai awal animasi dan 100% adalah nilai penyelesaiannya.
Cara kerja CSS animation
Ketika animasi dibuat dalam aturan @keyframe, animasi tersebut harus dipasangkan dengan selector; jika tidak, animasi tidak akan bekerja.
Animasi dapat dipasangkan ke selector; dengan menentukan setidaknya 2 property berikut:
- Nama animasinya
- Durasi animasi
Property CSS Animation
| Property | Deskripsi |
| animation | Ini adalah property singkat yang digunakan untuk mengatur semua property, kecuali property animation-play-state dan animation-fill-mode. |
| animation-delay | Ini menentukan kapan animasi akan dimulai. |
| animation-direction | Ini menentukan apakah animasi harus diputar sebagai cadangan pada siklus alternatif atau tidak. |
| animation-duration | Ini menentukan durasi waktu yang dibutuhkan animasi untuk menyelesaikan satu siklus. |
| animation-fill-mode | Ini menentukan gaya statis elemen (saat animasi tidak diputar). |
| animation-iteration-count | Ini menentukan berapa kali animasi harus diputar. |
| animation-play-state | Ini menentukan apakah animasi sedang berjalan atau dijeda. |
| animaton-name | Ini menentukan nama animasi @keyframes. |
| animation-timing-function | Ini menentukan kurva kecepatan animasi. |
| @keyframes | Digunakan untuk menentukan animasi. |
Contoh CSS Animation : mengubah warna background
Mari kita lihat contoh CSS animation sederhana yang mengubah warna latar belakang persegi panjang dari MERAH menjadi HITAM.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-animation: animasiku 6s; /* Chrome, Safari, Opera */
animation: animasiku 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes animasiku {
from {background: red;}
to {background: black;}
}
/* Standard syntax */
@keyframes animasiku {
from {background: red;}
to {background: black;}
}
</style>
</head>
<body>
<p><b>Catatan:</b> Browser IE 9 dan yang lama tidak mendukung property CSS3 animation. </p>
<div></div>
</body>
</html> Contoh CSS Animation : Moving Rectangle
Mari kita ambil contoh lain untuk menampilkan animasi dengan nilai persentase.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: animasiku 5s; /* Chrome, Safari, Opera */
animation: animasiku 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes animasiku {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:300px; top:0px;}
50% {background:blue; left:200px; top:300px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes animasiku {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:300px; top:0px;}
50% {background:blue; left:300px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Catatan :</b> Browser IE 9 dan yang lama tidak mendukung property CSS3 animation.</p>
<div></div>
</body>
</html> Semoga tutorial ini membantu Anda untuk memahami cara membuat efek animasi pada elemen menggunakan CSS animation.
