Belajar efek transition

MurliCyber    6/23/2014    Css3 , Original post , Tutorial blog    Comment   

Yeay,hei hei hei

udah lama gak ngepost dan komentar kalian pun udah jarang gw balas yah hahahaha XD bukan sibuk sih,cuma gak tau kenapa akhir akhir ini gw lagi malas ngepost jadi blog gak terurus begini udah berdebu nih blog gw,gak gw sapu sapu udah berjaring laba laba lagi di bagian header

okay,kali ini gw bakalan bahas apa yah,ya

gw bakalan bahas tentang efek transition apa itu transtion

apa itu transition?

transition itu css efek lambat cepat nya ketika di hover menurut gw bisa di bilang efek lambat atau cepat ketika di hover,supaya lebih menarik aja 

okay,yuk langsung aja liat demo nya

demo 1

arah kan kursor nya kesini

gimana efek ketika di hover lambat kan,nah itu dia kegunaan efek transtition tadi coba kita liat css tanpa efek transition

demo 2

arah kan kursor nya kesini

beda kan,iya lah soal nya kurang menarik untuk hover tanpa menambahkan css transition
sekarang kita liat basic code css nya di atas

#tion {
background: #ddd;
margin-left: 50px;
width: 180px;
height: 50px;
font-family: "Segoe UI Light","Open Sans Light",Sans-serif;
text-align: center;
font-size: 15px;
color: #222;
padding: 8px;
box-shadow: 0px 3px 1px rgba(0,0,0,0.2);
margin-top: 8px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.1s ease-in-out;}

#tion:hover{color:#fff;background: #FFCC00;}

yang kode warna merah adalah css transition nya,jadi kalau tanpa css transition ini kalian letakkan di dalam isi css kalian yang ingin di hover,maka akan tampak seperti demo 2 tanpa transition,jika menggunakan css transition maka seperti demo 1 kalau kode yang warna biru adalah durasi efek hover nya makin kecil angka nya makin cepat efek hover nya,makin banyak angka nya makin lambat efek hover nya
yuk liat contoh di bawah ini

jika angka durasi kita perbanyak transition nya 0.8s

#tion18 {
background: #ddd;
margin-left: 50px;
width: 180px;
height: 50px;
font-family: "Segoe UI Light","Open Sans Light",Sans-serif;
text-align: center;
font-size: 15px;
color: #222;
padding: 8px;
box-shadow: 0px 3px 1px rgba(0,0,0,0.2);
margin-top: 8px;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
}

arah kan kursor nya kesini

semakin lambat kan efek hover nya,makin banyak angka durasi nya makin lambat efek nya

jika angka durasi nya kita perkecil transition nya 0.1s

#tion88 {
background: #ddd;
margin-left: 50px;
width: 180px;
height: 50px;
font-family: "Segoe UI Light","Open Sans Light",Sans-serif;
text-align: center;
font-size: 15px;
color: #222;
padding: 8px;
box-shadow: 0px 3px 1px rgba(0,0,0,0.2);
margin-top: 8px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
}

arah kan kursor nya kesini

gampang kan,inti nya efek transition ini efek untuk memperlambat atau mempercepat ketika kursor di arah kan ke sesuatu object

see you