CSS GEÇİŞ EFEKTLERİ

CSS GEÇİŞ EFEKTLERİ

Tarhi : 26-05-2017 12:45:42 | Yazar : ÇAĞLAR BOSTANCI

CSS GEÇİŞ EFEKTLERİ

Geçiş efekleri objelerin, yükseklik, konum, renk, şefafflık gibi çok sayıda özelliğinin hareket halinde değişmesi ile ilgili 2D ve 3D animasyon etkisine verilen addır. İlk konumu değişen bir nesne son konuma geçtikten sonra tekrar eski konuma geri dönmesi bir geçiş efektidir. Bu gibi işlemlere CSS3’te transition denir.
örn aşağıda fare linkin üzerine geldiğinde arkaplan rengi değişecek.

Uygulamaya baktığımızda geçiş efekti fare üzerine geldiğinde hızlı bir şekilde olmaktadır. Biz ise bu değişimin daha yavaş ve gözle görülür bir şekilde olmasını istiyoruz. Bu işlemi transition ile göresel etkileşimleri belli bir sürede belirtilen efektlerle, gözle görülür bir şekilde gerçekleşmesini sağlayacaktır.
Geçiş efeklerini tetiklemek için :hover, :focus, :active, :target, :checked, :before, :after pseudo sınıflarından yararlanılır. Bu sınıfların dışında javascripte kullanılabilmektedir. Aşağıdaki yaptığımız uygulama geçişin 2 saniye içinde olmasını ve gözle görülür bir şekilde olmasını sağlaycaktır.

Transiton-Duration Kullanımı
Bir geçişin ne kadar süre içinde olacağını tanımlar. Saniye (s) ve milisaniye (ms) değerleri alabilir. Diğer fonksiyonlara bağımlı değildir ve tek başına kullanılabilir.

Transition-Timing-Function Kullanımı
Bir geçiş efektinin hareket tarzını belirler. Animasyon cubic-bezier ile sağlanır. cubic-bezier parametreleri ile uğraşmadan hareketleri basitçe tanımlamak için, sık sık kullanılan hareketler belli ismler altında standart olarak tanımlanmıştır. Bu hareketleri tanımlayan değerleri açıklamaları ile aşağıda verilmiştir.

transition-timing-function: cubic-bezier | ease | linear | ease-in | ease-out | ease-in-aout | staps | step-start | step-end;
cubic-bezier : (x1, y1, x2, y2) koordinatları ve zaman göre nesnenin hareket biçimini belirler.
ease : Düzgün hızlanan hareketi tanımlar. cubic-bezier(0.25,0.1,.25,1) karşılığı ilede tanımlanabilir. Varsayılan değerdir.
linear : Düzgün değişmeyen hızlı hareketi tanımlar. Geçiş boyunca hareket biçimi değişmez. Aynı hareketi cubic-bezier(0,0,1,1) karşılığı ile de tanımlayabiliriz.
easi-in : Yavaş hareketten hızlı harekete geçişi tanımlar. Aynı hareketi cubic-bezier(0.42,0,1,1) ile sağlayabiliriz.
ease-out : Hızlı hareketten yavaş harekete geçişi tanımlar. Aynı hareketi cubic-bezier(0,0,0.58,1) ile sağlayabiliriz.
ease-in-out : Yavaş hareketten hızlı harekete, hızlı hareketten yavaş harekete geçişi sağlar. Aynı hareketi cubic-bezier(0.42,0,0.58,1) ile sağlayabiliriz.
steps : Geçiş için başlangıç adınımını tanımlar. Örneğin steps(2, start) demekle iki basamaklı (merdiven gibi) geçişi iki adımda atlayarak yapar.
step-start : Geçiş süresine bakmaksızın doğrudan son konuma atlama yapar. steps(1, start) ile aynı anlama gelir.
step-end : Geçiş süresinin bitmesini bekler ve doğrudan son konuma atlama yapar. steps(1, end) ile aynı anlama gelir.

Transition-Delay Kullanımı
Bir geçiş efektinin belli bir süre gecikme ile başlatılmasını sağlar. Saniye (s) ve milisayniye (ms) değerleri alabilir.

Cubic-Bezier Eğerisi ve Anlamı
Fransız matematik Pierre Bezier tarrafından tanımlanmış eğrilere verilen addır. Bezier eğrisi algoritması kullanılarak, Kontrol noktası olarak adlandırılan noktaları giriş değeri alıp bu noktalara göre eğri oluşuturulabilir. 3 boyutlu grafiklerin ve yüzeylerin tasarlanmasında sıklıkla kullanılır.

Transition Fonksiyonu
transition-property, transition-duraty, transition-timing-function, transition-delay fonksiyonlarının değerlerini tek başına kullanan bir CSS3 fonksiyonudur. transition fonksiyonu ile geçiş fonksiyonlarının değerlerini bir satırda tanımlayıp aynı işi yapabiliriz. Söz dizimi aşağıdaki gibidir. Crome ve safari için transition kodunun başına kesinlikle -webkit- konulmalıdır.

transition: özellikseçme , Animasyonsüresi , AnimasyonTipi , GecikmeSüresi;

 

Reklam Alanı