Membuat Efek Animasi Transisi Pada Navigasi Menu di CSS3
Mahasiswa Profesional - CSS3 transition pada dasarnya adalah membuat efek peralihan dari suatu kondisi ke kondisi yang lain, seolah-olah seperti ada efek animasi saat perpindahan kondisi tersebut. Jadi tanpa menggunakan flash, sekarang dengan teknologi mutakhir CSS3 ini sudah bisa membuat animasi. Untuk lebih jelasnya, berikut contoh sintaksnya :
-webkit-transition:
[transition-property] [transition-duration] [transition-
timing function];
Property
transition ini masih belum bisa didukung sepenuhnya oleh browser Google Chrome.
Oleh karena itu, dalam penulisan kodenya harus diawali dengan –webkit- agar
dapat dijalankan oleh browser ini. Untuk Mozilla Firefox kita dapat menambahkan
awalan
–moz-, untuk opera & Microsoft Internet Explorer dapat ditambahkan dengan –o-.
Nimai
masing-masing dari CSS3 property transition dimulai dari yang pertama akan
dijelaskan sebagai berikut:
- Transition
Property: Nilai yang di isikan berupa property CSS yang akan dikenakan efek
transition ini, misalnya diisikan dengan property width maka hanya
kondisi lebar dari element yang didefinisikan saja yang akan mengalami efek
dari transition tersebut. Ada juga property yang lain seperti color,
background, margin, dan yang lainnya. Jika kita tidak mau repot
mendefinisikan satu-satu, kita dapat mengisikan dengan nila all yang
berarti transition akan diterapkan pada segala macam kondisi.
- Transition
duration: Bagian ini berhubungan dengan waktu. Maksudnya adalah berapa lama
transition ini akan berjalan, ukuran yang dimasukkan berupa detik atau second
(c) dan jugaberupa millisecond (ms). Misalkan transition duration ini disisikan
nilai 2s maka efek transisi akan berjalan selama 2 detik.
- Transition
timing function: Keguanan dari transition ini adalah untuk mendeskripsikan
bagaimana kecepatan dari efek transisi akan dihitung. Cara ini memang agak
sedikit membingungkan. Diharapkan contoh di bawah dapat memudahkan pemahaman
teman-teman semua. Ini dari transition ini bermacam-macam yaitu ease,
ease-in, ease-out, ease-in-out, dan linier.
Berikut contoh sederhana dari efek transition dengan CSS3 :
<!DOCTYPE
htnl PUBLIC “-//W3C//DTD XHTML 1.0 Transition/EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition.dtd”>
<html>
<head>
<title>Template
Blog-Transition</titile>
<style>
.transition1,
.transition2,
.transition3,
.transition4,
.transition5{
background:
#cccccc;
margin:
10px 0 10px 10px;
padding:
20px;
width:
400px;
height:
50px;
}
.transition1{
-webkit-transition
: all 3s ease;
-moz-transition : all 3s ease;
-o-transition : all 3s ease;
transition :
all 3s ease;
}
.transition2{
-webkit-transition
: all 3s ease-in;
-moz-transition : all 3s ease-in;
-o-transition : all 3s ease-in;
transition :
all 3s ease-in;
}
.transition3{
-webkit-transition
: all 3s ease-out;
-moz-transition : all 3s ease-out;
-o-transition : all 3s ease-out;
Transition :
all 3s ease-out;
}
.transition4{
-webkit-transition
: all 3s ease-in-out;
-moz-transition : all 3s ease-in-out;
-o-transition : all 3s ease-in-out;
transition :
all 3s ease-in-out;
}
.transition5{
-webkit-transition : all 3s linier;
-moz-transition : all 3s linier;
-o-transition : all 3s linier;
transition :
all 3s linier;
}
</style>
</head>
<body>
<div d=”wrapper”>
<div class=”transition1”>
<h2>transition
ease</h2>
</div>
<div class=”transition2”>
<h2>transition
ease in</h2>
</div>
<div class=”transition3”>
<h2>Transition
ease out</h2>
</div>
<div class=”transition4”>
<h2>Transition
ease in out</h2>
</div>
<div class=”transition5”>
<h2>Transition
linier</h2>
</div>
</div>
</body>
</html>
Tuliskan skrip di atas pada Notepad++ dan
simpan dengan format “nama_file.html (Nama file boleh disesuaikan dengan
keinginan). Selanjutnya buka file tadi menggunakan browser Google Crhome
kemudian lewatkan (hover) pada kotak yang muncul, kita akan dapat melihat efek
yang dihasilkan dari –webkit-transition tersebut.
Terlihat bahwa kelima kotak tersebut memiliki panjang
yang berbeda-beda saat kotak tersebut di hover. Ada yang terlihat memanjang,
lebih cepat, dan juga ada yang terlihat memendek pelan.
Semua kotak di berikan transition duration yang sama
(3s) dan untuk lebih mudahnya transition property diisi dengan all. Sedangkan yang
membedakan dari efek setelah dilewati maouse adalah transition timing function
yang berbeda-beda setiap kotaknya.
Reviewed by Zainul Muhibbin
on
May 11, 2020
Rating:
No comments: