- Konu sahibi
- #1
CSS
Klasik bir geçişi görebilmek için sıfırdan büyük süre ve gerçekten değişen uygun bir özellik gerekir. Özellik adı yazılmazsa varsayılan transition-property değeri all kullanılır; açıkça özellik seçmek daha kontrollüdür. En pratik kısa yazım şöyledir:
Burada başlangıç durumu
Bir transition değeri şu parçalardan oluşabilir:
Aşağıdaki dosyayı .html uzantısıyla kaydedin. Düğmeye tıklamak veya klavyeyle etkinleştirmek paragrafın sınıfını değiştirir; transition eski ve yeni CSS değerleri arasındaki geçişi yapar. Metin hiçbir durumda gizlenmez.
Beklenen sonuç, paragrafın arka planının 300ms içinde değişmesi ve 4px kaymasıdır. İkinci etkinleştirme eski duruma döner. Sınıf değiştiği hâlde geçiş aniyse süreyi, özellik listesini ve işletim sistemindeki hareket azaltma tercihini kontrol edin. Sınıf hiç değişmiyorsa önce JavaScript hatasını araştırın.
Klasik yumuşak geçişler, tarayıcının ara değer üretebildiği özelliklerde kullanılır. Modern CSS bazı kesikli değişimleri transition-behavior: allow-discrete ile ayrıca ele alabilir; bu başka bir davranıştır ve hedef tarayıcı desteği kontrol edilmelidir. Aşağıdaki seçimler pratikte daha öngörülebilir sonuç verir:
Genel kural olarak görsel hareketlerde
Sık yapılan hata,
Hareket hassasiyeti için
transition, bir HTML öğesinin CSS özelliği bir durumdan başka bir duruma geçtiğinde değişimin aniden değil, belirlenen süre içinde yumuşak biçimde gerçekleşmesini sağlar. Örneğin bir butonun üzerine gelindiğinde arka plan renginin bir anda değişmesi yerine kademeli geçiş yapmasını sağlayabilirsiniz. transition kendi başına yeni bir durum oluşturmaz; genellikle :hover, :focus veya bir sınıf değişikliğiyle tetiklenir.Nasıl çalışır?
Klasik bir geçişi görebilmek için sıfırdan büyük süre ve gerçekten değişen uygun bir özellik gerekir. Özellik adı yazılmazsa varsayılan transition-property değeri all kullanılır; açıkça özellik seçmek daha kontrollüdür. En pratik kısa yazım şöyledir:
Kod:
.buton {
transition: background-color 0.2s ease, transform 0.2s ease;
}
.buton:hover {
background-color: #2457a6;
transform: translateY(-2px);
}Burada başlangıç durumu
.buton içinde, yeni durum ise :hover içinde tanımlıdır. transition bildiriminin başlangıç seçicisinde bulunması önemlidir. Yalnızca :hover içine yazılırsa fare öğeden ayrıldığında dönüş animasyonu beklediğiniz gibi çalışmayabilir.Bir transition değeri şu parçalardan oluşabilir:
transition: özellik süre zamanlama gecikme;background-color geçişe katılacak özelliği, 0.2s süreyi, ease ise hızlanma-yavaşlama biçimini belirtir. Birden fazla özelliği virgülle ayırabilir veya tüm uygun özellikler için all kullanabilirsiniz. Ancak all, gereksiz özellikleri de geçişe dahil ederek beklenmeyen sonuçlar doğurabileceğinden yalnızca gerçekten gerekli durumlarda tercih edilmelidir.Çalışan en küçük örnek
Aşağıdaki dosyayı .html uzantısıyla kaydedin. Düğmeye tıklamak veya klavyeyle etkinleştirmek paragrafın sınıfını değiştirir; transition eski ve yeni CSS değerleri arasındaki geçişi yapar. Metin hiçbir durumda gizlenmez.
HTML:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Durumlar arasında CSS geçişi</title>
<style>
button { border-radius: 4px; }
.panel {
padding: 16px; background: #edf2f7; color: #111;
border: 1px solid #666; border-radius: 4px;
transition: background-color 300ms ease, transform 300ms ease;
}
.panel.is-highlighted { background: #ffef9f; transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .panel { transition: none; } }
</style>
</head>
<body>
<button id="toggle" type="button" aria-pressed="false">Vurguyu değiştir</button>
<p id="panel" class="panel">Bu metin her durumda okunabilir kalır.</p>
<script>
const button = document.getElementById("toggle");
const panel = document.getElementById("panel");
button.addEventListener("click", () => {
const active = panel.classList.toggle("is-highlighted");
button.setAttribute("aria-pressed", String(active));
});
</script>
</body>
</html>Beklenen sonuç, paragrafın arka planının 300ms içinde değişmesi ve 4px kaymasıdır. İkinci etkinleştirme eski duruma döner. Sınıf değiştiği hâlde geçiş aniyse süreyi, özellik listesini ve işletim sistemindeki hareket azaltma tercihini kontrol edin. Sınıf hiç değişmiyorsa önce JavaScript hatasını araştırın.
Hangi özelliklerde kullanılmalı?
Klasik yumuşak geçişler, tarayıcının ara değer üretebildiği özelliklerde kullanılır. Modern CSS bazı kesikli değişimleri transition-behavior: allow-discrete ile ayrıca ele alabilir; bu başka bir davranıştır ve hedef tarayıcı desteği kontrol edilmelidir. Aşağıdaki seçimler pratikte daha öngörülebilir sonuç verir:
| Özellik | Tipik kullanım | Dikkat edilmesi gereken |
|---|---|---|
| background-color | Buton ve menü vurgusu | Renkler arasında geçiş yapılır |
| opacity | Görünürlük hissi | Öğe yerleşimde kalır; tamamen gizlemek için tek başına yeterli değildir |
| transform | Büyütme, kaydırma, döndürme | Yerleşimi doğrudan değiştirmeden görsel hareket sağlar |
| height veya width | Boyut değişimi | Otomatik değerlerle geçiş sınırlı veya sorunlu olabilir |
Genel kural olarak görsel hareketlerde
transform ve opacity kullanmak, çok sayıda özelliği all ile geçişe sokmaktan daha kontrollüdür. display: none ile display: block arasında klasik bir transition tanımlanamaz; böyle bir durumda görünürlük, opaklık ve gerekirse ayrı bir sınıf mantığı birlikte tasarlanmalıdır.Uygularken izlenecek kararlar
- Başlangıç durumunu normal sınıfta, hedef durumu
:hover,:focus-visibleveya sınıf seçicisinde tanımlayın. - Yalnızca değişmesini istediğiniz özellikleri
transition-propertyveya kısatransitionyazımıyla seçin. - Kısa ve fark edilebilir bir süre ile uygun bir zamanlama fonksiyonu belirleyin; geçiş kullanıcıyı bekletmemelidir.
- Fare, klavye ve dokunmatik kullanımda hedef durumun erişilebilir ve anlaşılır kalıp kalmadığını test edin.
- Geçiş çalışmıyorsa özellik değerlerinin gerçekten değiştiğini, başka bir CSS kuralının öncelikli olmadığını ve özelliğin animasyon yapılabilir olduğunu denetleyin.
Sık yapılan hata,
transition özelliğini yalnızca hedef durumun içine yazmak, geçiş yapılamayan özellikleri zorlamak veya renk değişimini düşük kontrastlı hâle getirmektir. Ayrıca geçiş, öğeyi DOM'dan kaldırmaz ve işlevsel bir açılır menü davranışının yerine geçmez; yalnızca mevcut CSS durumları arasındaki görsel değişimi yumuşatır.Kaynaklar
Sık sorulan sorular
transition ile animation arasındaki temel fark nedir?
transition genellikle iki CSS durumu arasındaki değişime tepki verir ve bir tetikleyici ister. animation ise @keyframes ile birden fazla ara aşama tanımlayabilir; otomatik başlayabilir, tekrarlanabilir ve daha karmaşık zaman akışları oluşturabilir.Kullanıcı hareketi azaltmak istiyorsa transition ne yapılmalı?
Hareket hassasiyeti için
prefers-reduced-motion medya sorgusunu dikkate alıp geçiş süresini kısaltabilir veya kapatabilirsiniz. Böylece görsel vurgu korunurken gereksiz hareket azaltılır.