Bu yeni kod sistemi sayesinde iki renk, boyut, ölçeklendirme gibi birimler arasında geçiş sağlayabiliyoruz.
Özellikle son günlerde herkesin beğenisini kazanan Windows 8 benzeri menü örnekleri de konumuzun bir parçası.
Hazırladığım örnekleri görüntülemek için burayı tıklayın.
Makalemize önemli örneklerle ve incelenmesi gereken kaynaklarla devam edelim :
Örnek 1 : Fiziksel Büyüme Örneği Test Et
CSS ile bir kutu hazırlıyoruz. Ve transition sayesinde kutunun üzerine gelince büyümesini sağlıyoruz.
#aw_table1{
width:100px;
height:100px;
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
background:#666;
}
#aw_table1:hover{width:300px;}
Yukarıdaki kodları CSS dosyamızda veya tagları arasına yazıyoruz.
Yukarıdaki kodları ise BURAYA tagları arasına yazıyoruz.
Geçişler için sorun yaratan browserların başında Internet Explorer geliyor. Eğer profesyonel bilgisayar kullanıcısına hitap etmeyen web sayfalarınız varsa transition ve filter terimlerinden uzak durmanızı öneririm.
Kaynak : http://www.adobewordpress.com/css3-ile-gecis-efekti-transition-windows8-kutucuk-button/