- Katılım
- 6 Kas 2021
- Mesajlar
- 3,010
- Tepkime puanı
- 4,532
- Puanları
- 113
- Yaş
- 31
- Konum
- Türkiye
- Dc
- fatihbulut
CSS ile Animasyonlu Geçiş Efektleri (Transition) Nasıl Yapılır?
CSS transition'ları, bir HTML elementinin bir durumdan başka bir duruma geçişini yumuşak ve animasyonlu hale getirmek için kullanılan güçlü bir özelliktir. Bu makalede, CSS transition'larını detaylı bir şekilde ele alacağız.Transition Nedir?
CSS transition'ı, bir CSS özelliğinin değerindeki değişikliği belirli bir süre boyunca yavaşça (animasyonlu olarak) gerçekleştirmeye yarar. Örneğin, bir butonun rengi hover durumunda aniden değil de yavaşça değişsin istiyorsanız transition kullanabilirsiniz.Temel Transition Özellikleri
Transition için 4 temel özellik vardır:- transition-property: Hangi özelliğe transition uygulanacak
- transition-duration: Transition'ın süresi
- transition-timing-function: Transition'ın hız eğrisi
- transition-delay: Transition'ın başlamadan önce bekleme süresi
Kısa Yazım (Shorthand)
CSS:
transition: [property] [duration] [timing-function] [delay];1. transition-property
Hangi CSS özelliğine transition uygulanacağını belirtir.
CSS:
div {
transition-property: width;
}
CSS:
div {
transition-property: width, height, background-color;
}
CSS:
div {
transition-property: all;
}2. transition-duration
Transition'ın ne kadar süreceğini belirtir. Saniye (s) veya milisaniye (ms) cinsinden değer alır.
CSS:
div {
transition-duration: 2s; /* 2 saniye */
}
CSS:
div {
transition-duration: 500ms; /* 500 milisaniye (0.5 saniye) */
}3. transition-timing-function
Transition'ın zamanlama fonksiyonunu belirtir. Yani animasyonun hız eğrisini kontrol eder.Ana değerler:
- ease: Varsayılan değer, yavaş başlar, hızlanır, yavaş biter
- linear: Sabit hız
- ease-in: Yavaş başlar, hızlanarak biter
- ease-out: Hızlı başlar, yavaşlayarak biter
- ease-in-out: Yavaş başlar ve yavaş biter
- cubic-bezier(n,n,n,n): Özel bir zamanlama fonksiyonu tanımlamak için
CSS:
div {
transition-timing-function: ease-in-out;
}
CSS:
div {
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}4. transition-delay
Transition'ın başlamadan önce ne kadar bekleyeceğini belirtir.
CSS:
div {
transition-delay: 1s; /* 1 saniye bekler sonra başlar */
}Örnek Uygulamalar
Temel Buton Örneği
CSS:
.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #45a049;
}Çoklu Özellik Transition'ı
CSS:
.box {
width: 100px;
height: 100px;
background: red;
transition: width 1s, height 2s, background 1.5s;
}
.box:hover {
width: 200px;
height: 200px;
background: blue;
}Transform ile Birlikte Kullanım
CSS:
.card {
width: 200px;
height: 200px;
background: #f1f1f1;
transition: transform 0.5s ease;
}
.card:hover {
transform: scale(1.1) rotate(5deg);
}Transition ve Display Özelliği
Önemli bir not: display özelliğine (none/block vb.) doğrudan transition uygulanamaz. Bunun yerine opacity ve visibility kullanılabilir.
CSS:
.modal {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
}
.modal.active {
opacity: 1;
visibility: visible;
}Performans İpuçları
- GPU Hızlandırma: Transform ve opacity özelliklerini kullanmak genellikle daha performanslıdır çünkü GPU tarafından hızlandırılabilirler.
- Will-change: Tarayıcıya hangi özelliklerin değişeceğini önceden bildirmek için:
CSS:
.element {
will-change: transform, opacity;
}- Aşırı Kullanımdan Kaçının: Çok fazla elemente transition uygulamak performansı düşürebilir.
Tarayıcı Uyumluluğu
CSS transition'ları modern tarayıcıların tümünde desteklenir. Eski tarayıcılar için vendor prefix'ler kullanılabilir:
CSS:
.box {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}İleri Düzey Transition Kullanımları
Transition ve JavaScript Etkileşimi
Transition'lar JavaScript ile tetiklenebilir:
JavaScript:
document.querySelector('.box').style.width = '300px';Çok Aşamalı Transition'lar
Farklı özellikler için farklı zamanlamalar:
CSS:
.menu-item {
transition:
opacity 0.3s ease 0.1s,
transform 0.4s ease-out 0s;
}
.menu-item.hidden {
opacity: 0;
transform: translate(20px);
}Sonuç
CSS transition'ları, kullanıcı arayüzlerine profesyonel ve modern bir dokunuş katmanın en kolay yollarından biridir. Küçük etkileşimlerden kompleks animasyonlara kadar geniş bir kullanım alanı sunarlar. Doğru kullanıldığında hem kullanıcı deneyimini iyileştirir hem de arayüzünüzü daha dinamik hale getirir.Unutmayın, iyi bir transition:
- Kısa ve anlaşılır olmalı (genellikle 300ms-500ms arası)
- Doğal hissettirmeli
- Aşırı kullanımdan kaçınmalı
- Kullanıcı etkileşimlerine anlamlı yanıt vermeli
