Bildiğiniz gibi CSS 3 ile gelen bir çok yenilik bizim işlerimizi kolaylaştırdı. Ama benimde çok kullandığım öyle bir özellik var ki sormayın (sormayın çünkü zaten anlatacağım :) ) CSS transition özelliği. Bu özelliğin ana ve basit mantığı, jQuery ile yapılabilecek basit hover efektlerini CSS ile yapabilmemizi sağlıyor. İsterseniz hemen incelemeye başlayalım.
Her yazımda bahsediyorum ancak bunda da bahsedeyim. Kodlardaki ön ekler(-moz vb.) CSS 3 Graident Özelliğini Kullanma konumda açık bir şekilde verildi. Onun için tekrardan yazmayacağım. Ve başlıyorum.
Özellik aslında jQuery ile falan işlem yapmaz. Sadece 2. pozisyonda verilen işlemin gerçekleşmesini geciktir/yavaşlatır.
Genel kullanımı
-webkit-transition: özellikadı gerçekleşeceği süre ; /* Chrome ve Safari */
-moz-transition: özellikadı gerçekleşeceği süre; /* Mozilla */
-o-transition: özellikadı gerçekleşeceği süre; /* Opera */
transition: özellikadı gerçekleşeceği süre; /* Standart CSS3 Kodu */
Genel kullanım bu şekildedir. Ancak ben sizlere örnekler ile bunları biraz daha yatkın hale getireceğim.
Ancak Transition özelliğininde belirli parametreleri var. Ben yukarıda en basit hali ile açıkladım. O parametreler neler onlara göz atalım.
transition: Diğer parametrelerin bir arada toplanmış hali.
transition-property: Geçişin uygulandığı özelliğin adını belirler.
transition-duration: Geçişin toplam süresini tanımlar.
transition-timing-function: Bir geçiş sırasında hızın nasıl hesaplanacağını açıklar.
transition-delay: Geçişin başlangıç süresini tanımlar.
Önce kod kalabalığı olan uzun kullanımı yapayım. Uzun kullanım
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
bu şekilde. Bunun anlamıda “genişliği 2 saniye bekledikten sonra 1 saniye içerisinde doğrusal olarak belirtilen değere getir.” Ama tabi dediğim gibi bunlar tamamen kod kalabalığı bunların hepsini “transition” adı altında toplayacak olursak
transition: width 1s linear 2s;
gördüğünüz gibi ne kadar kısa bir kullanım oldu. Şimdi de 1-2 örnek ile bunu pekiştirelim.
Height’de transition kullanımı
transition: height 1s; /* Standart CSS3 Kodu */
-moz-transition: height 1s; /* Mozilla */
-webkit-transition: height 1s; /* Chrome ve Safari */
-o-transition: height 1s; /* Opera */
Transition ile yazı rengi değiştirme
transition: color 1s; /* Standart CSS3 Kodu */
-moz-transition: color 1s; /* Mozilla */
-webkit-transition: color 1s; /* Chrome ve Safari */
-o-transition: color 1s; /* Opera */
Kutuyu uzatmak
Öncelikle kendimize belirli bir kutu alanı oluşturmamız gerekli.
#kutu {width: 150px; height: 150px; background-color: blue;
transition: width 1.5s;
-moz-transition: width 1.5s;
-webkit-transition: width 1.5s;
-o-transition: width 1.5s;
}
#kutu:hover {width: 250px;
transition: width 1.5s;
-moz-transition: width 1.5s;
-webkit-transition: width 1.5s;
-o-transition: width 1.5s;
}
Hepsi için ayrı ayrı örnekleride bir dosya içerisinde topladım. Ona bakmak için burayı kullanın. Temanın full sürümünde yazı editöründen eklenebilecek bir kod sayesinde burayı daha görsel yapacağım hadi hayırlısı.
Kaynak: http://erenkeskin.com/css-3-transition-ozelligi/