CSS3 Transitions Özelliği: Hareketlendirme ve Hover Ayarları

Daha önceleri şu yazımda sizlere CSS3 Transition kullanarak opaklık hoverlarını görsel olarak nasıl ayarlayabileceğimizi göstermiştim.

Bu yazımda ise yine CSS3 Transition kullanarak nesneye hareket katacağız.

Sağa Hareket Ettirme Özelliği

.element {
color:#333;
-moz-transition:all .3s;-o-transition:all .3s;-webkit-transition:all .3s}

.element:hover {padding-left:20px}

Kodlarımız arasında bulunan
*padding-left kısmını padding-right olarak değiştirirsek elementimiz sola doğru hareket eder. (Ters mantık var)

Aşağı Hareket Ettirme Özelliği

.element {
color:#333;
-moz-transition:all .3s;-o-transition:all .3s;-webkit-transition:all .3s}

.element:hover {padding-top:20px}

Kodlarımız arasında bulunan
*padding-top kısmını padding-bottom olarak değiştirirsek elementimiz yukarı doğru hareket eder.