Web sitelerinde öğelerin aniden değişmesi yerine, daha akıcı ve göze hoş gelen geçişler yapmasını sağlayan CSS Transitions (Geçişler) özelliği, modern web tasarımında oldukça yaygın olarak kullanılır. Bu özellik, bir CSS özelliğinin bir değerden başka bir değere belirli bir süre içinde kademeli olarak değişmesini sağlar.
Bu yazıda, CSS Transition kullanımını detaylı bir şekilde inceleyecek, örneklerle nasıl çalıştığını gösterecek ve zamanlama fonksiyonları (timing functions) gibi konulara da değineceğiz.
CSS’te transition özelliğinin nasıl çalıştığını gösteren görsel. Transition, bir öğenin belirli CSS özelliklerinde zaman içinde yumuşak geçişler yapmasını sağlar.
CSS Transition Nedir ve Nasıl Çalışır?
Normalde, bir CSS özelliğinin değeri değiştiğinde, bu değişiklik ani bir şekilde gerçekleşir. Örneğin, bir düğmenin rengi hover (üzerine gelindiğinde) durumunda hemen değişir. Ancak transition kullanarak, bu değişikliği daha yumuşak ve kontrollü bir hale getirebiliriz.
Transition Parametreleri
CSS transition özelliği şu 4 parametreyi kullanarak tanımlanır:
transition: [özellik] [süre] [zamanlama fonksiyonu] [gecikme];
| Parametre | Açıklama |
|---|
| Özellik (property) | Hangi CSS özelliğinin değişeceğini belirtir ( ör: background-color, width, opacity vb.). |
| Süre (duration) | Geçişin ne kadar sürede tamamlanacağını belirler ( ör: 1s, 0.5s). |
| Zamanlama fonksiyonu (timing function) | Geçişin hız eğrisini belirler (ease, linear, ease-in, ease-out vb.). |
| Gecikme (delay) | Geçiş başlamadan önce bekleme süresi ( ör: 0.5s). |
Bunları örneklerle açıklayalım.
Basit Bir Transition Örneği
Öncelikle bir daire oluşturalım ve üzerine gelindiğinde renginin ve şeklini değişmesini sağlayalım:
<div class="kutu"></div>
.kutu {
width: 200px;
height: 200px;
background-color: red;
border-radius: 0;
transition: all 1s;
}
.kutu:hover {
background-color: blue;
border-radius: 50%;
}
Burada transition: all 1s; ifadesi şu anlama gelir:
- all → Tüm değişen özellikler için geçiş uygula
- 1s → Geçiş süresi 1 saniye olsun
Sayfada bu kutunun üzerine geldiğimizde, rengi kırmızıdan maviye ve köşeleri yuvarlak hale geçiş yaparak bir daireye dönüşecektir. Eğer transition eklenmemiş olsaydı, bu değişiklik aniden gerçekleşirdi.
Belirli Bir Özelliği Geçişli Hale Getirmek
Önceki örnekte all kullanarak tüm değişen özellikleri geçişe dahil ettik. Ancak genellikle sadece belirli bir CSS özelliği için geçiş eklemek daha iyi bir uygulamadır.
Örneğin, sadece background-color özelliğini geçişli yapmak istiyorsak:
.kutu {
width: 200px;
height: 200px;
background-color: red;
border-radius: 0;
transition: background-color 1s;
}
.kutu:hover {
background-color: blue;
border-radius: 50%;
}
Bu durumda, arka plan rengi 1 saniyede değişirken, border-radius anında değişecektir. Yani, üzerine gelindiğinde önce renk değişecek, ancak aniden daireye dönüşecektir.
Farklı Özelliklere Farklı Süreler Tanımlamak
Birden fazla özelliğe farklı geçiş süreleri vermek mümkündür. Örneğin:
.kutu {
width: 200px;
height: 200px;
background-color: red;
border-radius: 0;
transition: background-color 1s, border-radius 2s;
}
.kutu:hover {
background-color: blue;
border-radius: 50%;
}
Bu durumda:
- Arka plan rengi 1 saniyede değişir.
- Şeklin yuvarlak hale gelmesi ise 2 saniye sürer.
Bu yöntemi kullanarak bazı efektlerin daha yavaş, bazı efektlerin daha hızlı gerçekleşmesini sağlayabiliriz.
Transition Delay (Gecikme Süresi) Kullanımı
Geçişin başlamadan önce beklemesini istiyorsak transition-delay özelliğini kullanabiliriz.
.kutu {
width: 200px;
height: 200px;
background-color: red;
border-radius: 0;
transition: background-color 1s ease-in-out 0.5s;
}
.kutu:hover {
background-color: blue;
}
Buradaki 0.5s değeri, değişimin başlamadan önce yarım saniye beklemesini sağlar.
Zamanlama Fonksiyonları (Timing Functions) Kullanımı
Geçişin ne şekilde gerçekleşeceğini belirlemek için timing functions (zamanlama fonksiyonları) kullanılır. İşte en yaygın zamanlama fonksiyonları:
| Fonksiyon | Açıklama |
|---|
| linear | Geçiş süresince hız sabittir. |
| ease | Yavaş başlayıp hızlanır ve sonra tekrar yavaşlar. |
| ease-in | Yavaş başlar, hızlanarak tamamlanır. |
| ease-out | Hızlı başlar, yavaşlayarak biter. |
| ease-in-out | Yavaş başlayıp hızlanır, sonra tekrar yavaşlar. |
Örneğin:
.kutu {
width: 200px;
height: 200px;
background-color: red;
transition: background-color 2s ease-in-out;
}
.kutu:hover {
background-color: blue;
}
Bu kodda, arka plan rengi yavaş başlayıp hızlanacak, sonra tekrar yavaşlayarak değişecektir.
Özel Geçiş Eğrileri: Cubic Bezier Kullanımı
Daha fazla kontrol sağlamak için cubic-bezier() fonksiyonu kullanılabilir. Bu, geçiş eğrisini tamamen özelleştirmemizi sağlar.
Örnek olarak, ani bir hızlanma ve yavaşlama efekti oluşturabiliriz:
.kutu {
width: 200px;
height: 200px;
background-color: red;
transition: background-color 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.kutu:hover {
background-color: blue;
}
Bu fonksiyon, hareketin nasıl başlayacağını, hızlanacağını ve yavaşlayacağını belirler. Eğer kendi bezier eğrilerinizi oluşturmak isterseniz, easings.net gibi sitelerden ilham alabilirsiniz.
Özet: CSS Transition Kullanırken Nelere Dikkat Etmelisiniz?
- Tüm özellikleri birden değiştirmek yerine sadece belirli özellikleri geçişli yapın.
- Geçiş süresini ayarlayarak görsel olarak hoş bir deneyim oluşturun.
- Etkileşimi daha doğal hale getirmek için zamanlama fonksiyonlarını kullanın.
- Ani değişimlerden kaçının, her geçişin akıcı olmasını sağlayın.
transition: all; kullanımı yerine hangi özelliklerin geçiş yapacağını açıkça belirtin.
CSS Transitions, web sitelerinde butonlar, kutular, menüler ve diğer öğeler için animasyonlu efektler oluşturmanın en basit yollarından biridir. Geçişleri kullanarak, web sitenize daha profesyonel ve modern bir görünüm kazandırabilirsiniz.