ALL NEWS

fungsi transition pada css

fungsi transition pada css

ahh, hari yang indah dengan cuaca yang merdu dan disertai koneksi internet setelah laptop rusak, dan akhirnya bisa posting lagi, kali ini kita akan membahas tentang transition yang terdapat pada cascading style sheet, transition adalah sebuah kode css untuk menampilkan animasi saat adanya perubahan visual, atau jelasnya seperti gambar disamping, gambar disamping menunjukkan link yang belum tersorot berwarna biru dan setelah disorot (hover) berwarna merah, "mmm, merah atau kuning ya?" hehehe sudah sudah.

kode transitionnya berfungsi sebagai pembuat animasi, contoh gambar diatas dari awal belum disorot warna link adalah biru dan saat disorot warna ditentukan oranye dan ditambahkan kode transition, maka hasilnya adalah perubahan warna biru ke oranye akan berjalan mulus layaknya animasi

naah sekarang penulisan kodenya, sintax kode transition seperti ini :

• transition-delay

properti ini akan memberikan waktu delay sebelum transisi, value dapat di isi berupa satuan s dan ms
(sekon dan milisekon)

• transition-duration

transition : property duration timing-function delay
contoh :
transition : all 1s ease 50ms

ada satu lagi yang harus diperhatikan efek transisi css3 ini tidak didukung oleh semua browser jadi harus ditambahkan prefix pada tiap browser

-webkit-transition : all 1s ease 50ms ; /*untuk chrome dan safari*/
-moz-transition : all 1s ease 50ms ; /*untuk mozilla*/
-o-transition : all 1s ease 50ms ; /* untuk opera */
transition : all 1s ease 50ms; /*fall back*/

percobaan

CSS

/* membuat boxnya*/
#box{
border: 1px solid black;
padding-top: 4px;
height: 30px;
text-align: center;
width: 30%;
border-radius: 14px}
/*membuat transisinya*/
.animasi{
-webkit-transition: all 1s ease 50ms;
-moz-transition: all 1s ease 50ms;
-o-transition: all 1s ease 50ms;
transition: all 1s ease 50ms;
}
/*membuat animasi hover*/
.sorot:hover{
color: white;
background-color: black;
-webkit-transform : scale(2,2);
-moz-transform : scale(2,2);
-o-transform : scale(2,2);
transform : scale(2,2);
}

HTML

<div id="box" class="animasi sorot">
box
</div>

maka hasilnya

box

visit link download