Animasi Transisi dengan CSS3

Membuat animasi sederhana kini sudah sangat mudah untuk dilakukan pada website. Karena teknologi sekarang ini sudah mumpuni sehingga tidak perlu lagi menggunakan teknologi lama yang biasanya akan memakan waktu dalam proses menampilkan animasi kedalam website. Saat ini hanya menggunakan CSS3 saja kita sudah dapat membuat animasi sederhana. Salah satu fitur terbaru adalah fungsi transisi. Sesuai dengan pembahasan kita pada artikel kali ini, kita akan membahas bagaimana cara kerja animasi transisi dengan CSS3.

Transisi ini adalah proses dimana terdapat sebuah pergerakan seperti slowmotion dari gerakan awal ke gerakan selanjutnya. Dengan fungsi ini diharapkan kita dapat berkreasi sesuai dengan imajinasi kalian masing-masing dalam mengimplementasikan fungsi transisi ini. Untuk membuat transisi ini terbilang cukup mudah, kalian hanya perlu memahami perintah dasar HTML dan CSS saja. Cara penulisan transisi pada CSS akan kita bahas lebih lanjut.

Pertama kita buat terlebih dahulu tampilan sebagai contoh saja. Untuk mempersingkat waktu kalian bisa simpan contoh code dibawah ini.

transisi.html

<!DOCTYPE html>
<html>
<head>
	<title>Transisi CSS3</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>



<div></div>

<p>Coba kalian geser mouse ke kotak warna merah dan lihat apa yang akan terjadi.</p>

</body>
</html>

style.css

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 4s;
}

div:hover {
    width: 300px;
    height: 300px;
}

Setelah sudah kalian simpan kedua file tersebut dalam satu folder yang sama agar dapat berjalan dengan semestinya. Untuk melihat hasilnya kalian bisa buka pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

animasi-transisi-dengan-css3-rangga1-120917

Gambar diatas adalah tampilan awal saat belum terjadi perubahan. Untuk melihat transisinya kalian bisa coba geser mouse pada kotak merah dan lihat hasilnya akan seperti gambar dibawah ini.

animasi-transisi-dengan-css3-rangga2-120917

Gambar akan berubah dengan proses transisi, sehingga terlihat lebih halus saat perubahan dari kotak kecil ke kotak besar. Dengan adanya fungsi ini diharapkan kalian dapat buat animasi transisi yang lebih kompleks lagi.

Sekian pembahasan mengenai animasi transisi dengan CSS3. Semoga bermanfaat.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *