Cara Membuat Animasi Sederhana dengan CSS3

Cara Membuat Animasi Sederhana dengan CSS3

CSS telah berkembang selama lebih dari 20 tahun. Hingga kini CSS telah berkembang hingga versi CSS3. Dan yang menarik, di CSS3 ini terdapat properti untuk membuat animasi. Mungkin kalau HTML5 kita bisa menggunakan Canvas. Tapi kalau CSS3 ini kita menggunakan properti animation dan kawan-kawannya.

Yang ingin saya bagikan kali ini adalah cara membuat animasi sederhana dengan CSS3.

Langsung saja ya.

Animasi Ganti Warna

Saya akan membuat animasi kotak yang bisa berubah warna. Saya akan jelaskan maksud setiap properti di bawah.

Pertama buat dulu kotaknya.

.kotak {
	margin: 20% 0px 0px 45%;
	width: 100px;
	height: 100px;
	background: red;
	animation: berubah 3s linear infinite;
	-moz-animation: berubah 3s linear infinite;
	-webkit-animation: berubah 3s linear infinite;
}

Pada style CSS di atas saya membuat class kotak dengan keterangan :

Margin : 20% (atas), 0px (kanan), 0px (bawah), 45% (kiri). Saya tetapkan seperti itu agar kotaknya berada di tengah halaman.

Tinggi dan panjang 100px.

Pada properti animation, berubah merupakan nama animasi. Jadi, bisa diganti sesuka Anda. Tapi ingat untuk memanggil nama animasi tersebut setelah keyframes.

Animation : 3s artinya animasi akan berlangsung selama 3 detik, linear artinya akan berjalan maju, infinite artinya animasi tidak akan berhenti.

Baca Juga : Cara Membuat Garis Vertikal dengan HTML dan CSS

Setelah itu kita membuat agar kotak tersebut dapat berubah warna dengan menggunakan Keyframes.

Keyframe digunakan untuk membuat suatu elemen dapat berubah, salah satunya adalah animasi.

@keyframes berubah {
	0% {background: red;}
	100% {background: yellow;}
}

Pada kode di atas kita menggunakan keyframes untuk memanggil nama animasi berubah. Dan mengubah warna background kotak dari merah menjadi kuning.

Lalu kita panggil Class kotak dengan tag div.

<div class='kotak' />

Bisa dilihat hasilnya : 

See the Pen Rectangle Background Change Animation (Not Tidy) by Xmall75 (@xmall75) on CodePen.

"Kok pas transisi kuning ke merah kaku? Ngga rapi gitu?".

Oke sekarang kita rapikan agar transisi dari kuning ke merah jadi halus.

Ubah bagian keyframes-nya jadi seperti di bawah.

@keyframes berubah {
	0% {background: red;}
	50% {background: yellow;}
	75% {background: orange;}
	100% {background: red;}
}

Sekarang lihat hasilnya : 

See the Pen Rectangle Background Change Animation by Xmall75 (@xmall75) on CodePen.

Kita hanya perlu menyesuaikan warnanya sehingga terlihat lebih rapi.

Animation CSS ini sangat berguna untuk dimanfaatkan.

Sekian artikel saya kali ini semoga bermanfaat.