CSS3'ün tanıtımıyla birlikte, harika efektler oluşturmak için kullanılabilecek birçok yeni özellik geliyor; En kullanışlı olanlardan biri geçiş özelliği.
Geçiş özelliği CSS'de önemli bir yeni gelişmedir. Basit bir yapı kullanarak bir div veya sınıf üzerinde dinamik bir değişiklik efekti oluşturmak için kullanılabilir:
transition: property duration timing-function delay;CSS3'ün geçişi, jQuery gibi bir JavaScript kitaplığının büyük yükü olmadan sitelere küçük bir animasyon eklemenin harika bir yoludur.
Başlamadan önce burada bir demo görebilirsiniz geçiş özelliği eylemde .
İlk olarak, geçiş özelliğinin çalışması için, uygulanacak standart mülkün tanımlanması gerekmektedir. Muhtemelen tanımlanacak en yaygın iki özellik genişlik ve yüksekliktir. Özelliği yazmak için sadece aşağıdakileri kullanın:
transition-property: define propertyDaha sonra, özellik tanımlandıktan sonra, başlangıç ve bitiş değerlerinin atanması gerekir. Genişlik veya yükseklik gibi değerler söz konusu olduğunda, özellik başlangıç değeri ve ardından başka bir koşulu olan bir son değer ile ayarlanmalıdır.
Örneğin, burada geçiş özelliğini genişliğe, ardından genişliğin başlangıç değerine ayarlıyoruz ve ardından öğenin üzerine geldiğinde uç değerini ayarlıyoruz:
#mainheader {transition-property:width;width:50px;}#mainheader:hover {width:75px;}Artık dönüşümü, başlangıç ve bitiş değerlerini tanımladığımıza göre, geçiş süresini tanımlamalıyız. Bu, aşağıdaki gibi bir saniye veya milisaniye cinsinden bir uzunluk tanımlayarak elde edilir:
transition-duration: duration;Bunu örnekte yapılandırarak aşağıdaki kod oluşturulur:
#mainheader {transition-property:width;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Bu, ana başlık div'in 5 saniyelik bir süre boyunca 25px genişleyeceği anlamına gelir.
Kod, güzel bir etki yaratmak için yeterlidir, ancak zamanlama işlevini kullanarak CSS3 geçiş özelliğini daha fazla kullanabiliriz. Bu özelliği kullanarak geçiş süresinin hız eğrisini değiştirmek mümkündür. Geçiş özelliği, varsayılan olarak doğrusal bir eğriye ayarlanır. Bununla birlikte, hız eğrisini değiştirmek için kolaylık, kolaylık, kolaylık, kolay giriş ve hatta kübik bezeyi tanımlayabilirsiniz. Kübik bezler n (n, n, n, n) (n, n, n, n) kullanarak kendi değerlerinizi tanımlamanıza izin verir, burada n, 0 ile 1 arasında olabilir (örneğin, doğrusal (0,0,1,1) olabilir).
Bu koda ekleyerek bizim örneğimize:
#mainheader {transition-property:width;transition-timing-function:ease-in-out;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Ayrıca geçiş-gecikme özelliğini kullanan geçiş süresi gibi geçiş geçişi başlamadan önce bir duraklama tanımlar:
transition-delay: time;Son olarak, CSS3 geçiş özelliğini kullanırken iki şeyi dikkate almak önemlidir. Öncelikle, şu anda dolaşımda olan çoğu tarayıcıyı kullanmak için bir tarayıcı öneki gerekir (istisnalar IE10, Opera ve Firefox16 +):
-moz-geçişi: Firefox 15 için
-webkit geçişi: Chrome ve Safari için
(IE9 ve daha düşük sürümlerin geçiş özelliğini desteklemediğini unutmayın.)
İkinci olarak, açıklık için yukarıdaki örneklerde uzun el kullanmış olmamıza rağmen, aşağıdaki gibi kısa formda yazmak en iyi uygulama olarak kabul edilir:
#mainheader {-moz-transition: width ease-in-out 0.5s 0.1s; /* for Firefox 15 */-webkit-transition: width ease-in-out 0.5s 0.1s; /* for Chrome and Safari */transition: width ease-in-out 0.5s 0.1s;width:500px;}#mainheader:hover {width:750px;}CSS3'ün geçiş özelliğini kullanıyor musunuz? JQuery tabanlı aralar ile nasıl karşılaştırılır? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, hareket resmi Shutterstock üzerinden.