CSS transition Özelliği Nedir ve Nasıl Kullanılır?

CSS anlık geçişleri bünyesinde barındırıyordu. Örneğin bir bağlantının üzerine geldiğinde çeşitli özelliklerini değiştirebiliyoruz. CSS3 ile birlikte ani geçişlere artı olarak CSS transition özelliği eklenmiştir. Geçişler yavaş yavaş olduğu gibi uzun uzadıya geçişler de mevcuttur. Durumu daha iyi anlayabilmek için yukarıda bahsettiğimiz gibi bir fare imlecinin bağlantı üzerine geldiğinde renk değişmesini anlık değil aşama aşama değiştirelim.

Renk geçişi belli bir zaman aralığına yayılacaktır ve iki renk arasındaki geçişte ara renkler görünecektir. Bu geçişe bazı efektlerde ekleyebiliriz.

CSS transtion Özellikleri

Geçiş efektlerini uygulamak için aşağıdaki özellikleri kullanırız.

• transition-property
• transition-duration
• transition-delay
• transition-timing-function
• transition

Şimdi bu özellikleri tek tek inceleyelim.

Özellik Belirleme (transition-property)

Uygulanan geçiş efektinin elemanın hangi özelliği üzerinden yapılacağını belirlemek için transition-property özelliğini kullanırız.

Örneğin color değeri geçiş uygulanacak elemanın başlangıç ve son rengi arasında bir geçiş olacağını gösterir.

all değeri tüm tanımlarda geçiş yapılacağı anlamındadır.

a
{
 color:red;
 transition-property: color;
}

a:hover 
{
 color:blue;
}

Süre Belirleme (transition-duration)

Geçiş efektlerini uygularken verdiğimiz efektin ne kadar süre ile devam edeceğini ayarlayabiliyoruz. Bu ayarlamayı transition-duration özelliği yapıyoruz.

0 değeri geçişin hemen olacağı anlamına gelir.

a
{
color:red;
transition-property: color;
transition-duration:0.5s;
}
a:hover
 {
color:blue;
}

Gecikme Belirleme (transition-delay)

Uygulanan geçiş efektinin ne kadar zaman sonra başlayacağını belirler. Belirlenen zamana kadar animasyonu durdurur ve sonra animasyon başlar.

a
{
color:red;
transition-property: color;
transition-duration:0.5s;
transition-delay: 0.5s;
}
a:hover
{
color:blue;
}

Animasyonumuz 0.5 saniye sonra başlayacaktır.

Zamanlama Fonksiyonu Belirleme (transition-timing-function)

Oluşturacağımız geçişlere daha estetik geçişler sağlamak için kullanılan fonksiyonlardır. Bu özelliğe ease, ease-in, ease-out, ease-in-out ve cubic-bezier değerlerini tanımlayabiliyoruz.

Transition Kısayolu

Yukarıda tek tek ayrı ayrı her özelliği tanımlayabildiğimiz gibi tek bir tanımlama ile bunları kısa bir şekilde tanımlamak da mümkün.

transition-property: width;
transition-duration: 0.5s;
transition-delay: 0.5s;
transition-timing-function: ease-in-out;

Yukarıdaki son örnekte geçiş tanımlarımız 4 adet idi. Biz burada bunları tek bir tanımda toplayalım.

transition: width 0.5s ease-in-out 0.5s;

Görüldüğü gibi kodumuz daha kısa bir hal aldı. bundan sonra bu şekilde kullanmayı tercih edeceğim.

Çoklu Geçiş Kullanımı

Yukarıda yaptığımız gibi tek bir özellik üzerinden geçiş efekti uygulayabildiğimiz gibi virgül ile ayırmak kaydı ile birden fazla geçiş efekti de uygulayabiliriz.

input
{
display:block;
background-color:#788182;
border:0;
border-radius:5px;
width:100px;
padding:5px 10px;
color:#fff;
transition: width .5s ease-in-out, background .3s ease;
}

input:focus
{
width:250px;
background-color:#50ebd6
}

Son örneğimizde arama alanına odaklandığımızda genişliğini ve ardalan rengini geçiş efekti ile değiştirdi.

Geçiş Efektini Tetiklemek

Geçiş efektlerini tetiklemek için genelde :hover sözde sınıfı kullanılsa da :active, :target, :focus gibi sözde sınıfları da kullanılabilir.

Ayrıca javascript ile DOM’a yapılan müdahaleler de buna eklenebilir.

a
{
display:block;
background-color:#c4342f;
padding:5px 10px;
width:100px;
color:#fff;
transition: background-color 2s ease-in-out 1s;
}

a.tetikle
{
background-color:blue;
}

Javascript ilede bu bağlantıya tetikle diye bir sınıf tanımlayalım.

document.querySelector(‘a’).className = ‘tetikle’;

Javascript ile Geçişin Bittiğinin Kontrolü

Javascript ile geçiş efektinin bittiğini kontrol etmek çok basit.

myElement.addEventListener("transitionend", function() {
// geçiş efekti bittikten sonra bunu yap
}, true);

Geçiş efekti tamamlandığında transitionend foksiyonunu tetikilyecektir.

CSS transition özelliği konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.

https://yazilimdelisi.com/category/web-gelistirme/css/

Sosyal Medya Hesaplarımız

Son Eklenen Yazılar