Belajar Fungsi Transisi pada CSS3

Transisi pada CSS3 terbilang fitur baru, karena dahulu untuk membuat efek animasi sederhanan tidak bisa menggunakan CSS. Biasanya akan diakali dengan Flash, namun penggunaan flash sekarang ini sudah jarang bahkan telah ditinggalkan karena terlalu berat untuk meload data tersebut lewat browser. Dengan Fitur baru dari CSS3 akan membantu kalian dalam membuat tampilan website lebih menarik lagi. Sesuai dengan pembahasan kali ini kita akan belajar fungsi transisi pada CSS3.

Transisi ini adalah salah satu fitur CSS3 yang sering digunakan, karena efeknya cukup membuat takjub pengunjung website kita. Membuat animasi sederhana yang keren dengan script css yang sederhana. Bagaimana cara kerja fungsi transisi pada CSS ini, mari kita simak langkah-langkah berikut ini. Pertama tentu kalian buat terlebih dahulu file HTML seperti ini.

transisi.html

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<p>Arahkan Mouse pada kotak merah</p>

<div></div>



</body>
</html>

Lalu kalian tuliskan script CSS seperti ini.

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

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

Code CSS diatas kalian bisa tulis diantara tag head dan harus didalam tag style. Kira-kira seperti ini struktur penulisanya.

<!DOCTYPE html> 
<html> 
   <head> 
       <style> CODE CSS </style>
 <img class="alignnone size-medium wp-image-172" src="http://dumetschool.org/wp-content/uploads/2017/06/logo-5-300x300.jpg" alt="belajar-fungsi-transisi-pada-css3" width="300" height="300" />  </head>

Setelah sudah semua script diketik, kalian bisa simpan file tersebut dengan nama sesuai keinginan kalian. Pada contoh kali ini saya memberikan nama transisi.html. Ingat formatnya harus .html. Untuk melihat hasilnya kalian bisa buka file tersebut lewat browser kesayangan kalian. Jika berhasil maka tampilanya akan seperti ini.

Gambar diatas adalah bentuk awal sebelum terjadi perubahan. Kalian bisa coba geserkan mouse ke arah kotak merah dan lihat apa yang terjadi.

Saat mouse meng-hover kotak merah tersebut, maka kotak tersebut akan berubah menjadi besar dengan efek pergerakan khas animasi sederhana sehingga terlihat lebih smooth. Seperti itu kira-kira fungsi transisinya. Kalian bisa kembangkan lagi sesuai dengan kebutuhan website kalian.

Sekian pembahasan mengenai belajar fungsi transisi pada 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 *