CSS3 Geçiş Efektleri

CSS3 ile hayatımıza gelen efektlerden kullanımı en hızlı ve kolay olanı geçiş efektleridir. Kullanımı oldukça basit olmasına rağmen Internet Explorer’ın eski sürümlerine uyumlu bir tasarım hazırlama gibi bir ihtiyacınız varsa sizi biraz zorlayabilir.
Geçiş efekti vermek için fare olaylarına ihtiyacımız var. Örneğin imleç üzerine geldiği zaman ya da tıkladığı zaman gibi.
Kullanmamız gereken CSS3 kodu aşağıdaki gibidir:


Kod:
transition: {etkilenen css etiketleri} {geçiş süresi} {geçiş efekti zamanlaması} {bekleme süresi};
Etkilenen CSS Etiketleri: Animasyonun tüm CSS kodlarında mı kullanılacağını yoksa sadece bir CSS kodu için mi kullanılacağını belirtmeye yarar. Tüm değişiklikler için geçiş efekti olsun istiyorsanız “all” kullanılır. Örneğin hover olayındaki sadece genişlik değişsin istiyorsanız “width” kullanılır.

Geçiş Süresi: Geçiş efektinin ne kadar süreceğini belirler. Saniye cinsindendir. Genel olarak “0.2s”, “0.4s” gibi ondalık birimler kullanılır.
Geçiş Efekti Zamanlaması: Geçiş efektinin hangi şekilde zamanlanacağını belirler. Düz bir geçiş mi, önce hızlı sonra yavaşlayan bir geçiş mi? Örnekler arttırılabilir.
Bekleme Süresi: Geçiş efekti başlamadan önce ne kadar bekleneceğini belirtir. Boş geçilirse ya da belirtilmezse “0” olarak alınır ve efekt anında başlar.
Bu yapı kısaltılmış yapıdır. Bu yapının ayrıştırılmış şekli aşağıdaki gibidir:

Kod:
transition-property: {etkilenen css etiketleri};
transition-duration: {geçiş süresi};
transition-timing-function: {geçiş efekti zamanlaması};
transition-delay: {bekleme süresi};
Örneğin bir button oluşturduk. İmgeç üzerine geldiğinde ve tıkladığında gösterilmesi için farklı efektler verdik.


Kod:
CSS


.wf-button {
border: 1px solid #DFDFDF;
background: #FDFDFD;
padding: 8px 16px;
border-radius: 3px;
box-shadow: 0 4px 2px rgba(0,0,0,0.2);
cursor: pointer;
outline: none;
}
.wf-button:hover {
background: #F9F9F9;
}
.wf-button:active {
box-shadow: 0 2px 2px rgba(0,0,0,0.1);
position: relative;
top: 2px;
}
Bu geçişlerin animasyonlu olmasını istersek ana sınıfa/ID’ye transition kodlarını ekliyoruz. :hover ya da :active sınıflarına eklemiyoruz.

Kod:
wf-button-animated {
border: 1px solid #DFDFDF;
background: #FDFDFD;
padding: 8px 16px;
border-radius: 3px;
box-shadow: 0 4px 2px rgba(0,0,0,0.2);
cursor: pointer;
outline: none;

-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.wf-button-animated:hover {
background: #F9F9F9;
}
.wf-button-animated:active {
box-shadow: 0 2px 2px rgba(0,0,0,0.1);
position: relative;
top: 2px;
}
Bu kadar basit. Örneğimizi inceleyecek olursak:

Kod:
transition: all 0.2s ease-in;




Tüm projenizde kullanabilmeniz için transition sınıfları da oluşturabilirsiniz.


Kod:
.transition-all {
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}