CSS Podcast - 044: Geçişler
Bir web sitesiyle etkileşim kurarken birçok öğenin state içerdiğini fark edebilirsiniz. Örneğin, açılır listeler açık veya kapalı durumda olabilir. Odaklanıldığında veya fareyle üzerine gelindiğinde düğmelerin rengi değişebilir. Kalıcı iletişim kutuları görünür ve kaybolur.
Varsayılan olarak CSS bu durumların stilini anında değiştirir.
CSS geçişlerini kullanarak, öğenin başlangıç durumu ile hedef durumu arasında ara değer hesaplayabiliriz. Bu ikisi arasındaki geçiş görsel yön, destek ve etkileşimin nedeni-sonuçları hakkında ipuçları sağlayarak kullanıcı deneyimini iyileştirir.
Geçiş özellikleri
CSS'de geçişleri kullanmak için çeşitli geçiş özelliklerini veya transition
kısayol özelliğini kullanabilirsiniz.
geçiş özelliği
transition-property
özelliği, hangi stillerin geçirileceğini belirtir.
.my-element {
transition-property: background-color;
}
transition-property
, virgülle ayrılmış listede bir veya daha fazla CSS özelliği adını kabul eder.
İsteğe bağlı olarak her mülkün geçiş yapması gerektiğini belirtmek için transition-property: all
kullanabilirsiniz.
geçiş süresi
transition-duration
özelliği, geçişin tamamlanacağı süreyi tanımlamak için kullanılır.
transition-duration
, saniye (s
) veya milisaniye (ms
) cinsinden zaman birimlerini kabul eder ve varsayılan olarak 0s
değerine ayarlanır.
geçiş-zamanlaması-fonksiyonu
transition-duration
boyunca CSS geçiş hızını değiştirmek için transition-timing-function
özelliğini kullanın.
Varsayılan olarak CSS, öğelerinizin geçişini sabit bir hızda (transition-timing-function: linear
) gerçekleştirir. Ancak doğrusal geçişler bir miktar yapay görünebilir: Gerçek hayatta nesnelerin ağırlığı vardır ve anında durup başlayamaz. Geçişleri yumuşak veya yumuşak geçişler yaparak daha canlı ve doğal hale getirebilirsiniz.
CSS Animasyonu modülümüzde zamanlama işlevleri hakkında ayrıntılı bir genel bakış sunulmaktadır.
Farklı zamanlama işlevlerini gerçek zamanlı olarak denemek için DevTools'nı kullanabilirsiniz.
geçiş-gecikme
Geçişin başlayacağı saati belirtmek için transition-delay
özelliğini kullanın. transition-duration
belirtilmezse varsayılan değer 0s
olduğundan geçişler anında başlar. Bu mülkte saniye (s
) veya milisaniye (ms
) gibi bir zaman birimi kabul edilir.
Bu özellik, grupta sonraki her bir öğe için daha uzun bir transition-delay
ayarlanmasıyla elde edilen kademeli geçişler için kullanışlıdır.
transition-delay
, hata ayıklama için de kullanışlıdır. Gecikmeyi negatif bir değere ayarlamak zaman çizelgesinin daha da ilerisine giden bir geçişi başlatabilir.
stenç: "geçiş"
Çoğu CSS özelliğinde olduğu gibi bir kısaltma vardır. transition
; transition-property
, transition-duration
, transition-timing-function
ve transition-delay
öğelerini birleştirir.
.longhand {
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.shorthand {
transition: transform 300ms ease-in-out 0s;
}
Neler geçiş yapabilir ve neler olamaz?
CSS yazarken, hangi özelliklerde animasyonlu geçiş olması gerektiğini belirtebilirsiniz. Animasyonlu CSS özelliklerinin bu MDN listesine bakın.
Genel olarak, yalnızca başlangıç ve son durumları arasında "orta duruma" sahip olabilecek öğelerin geçişi mümkündür. Örneğin, serif
ile monospace
arasındaki "orta durumun" nasıl olması gerektiği belirsiz olduğundan font-family
için geçiş eklemek mümkün değildir. Diğer yandan, birimi ara değer olarak interpolasyon yapılabilen bir uzunlukta olduğundan font-size
için geçişler eklemek mümkündür.
Geçişini yapabileceğiniz bazı yaygın özellikler aşağıda verilmiştir.
Dönüştür
transform
CSS özelliği daha sorunsuz animasyonla sonuçlanıp daha az pil tüketen bir GPU ile hızlandırılmış özellik olduğundan genellikle bu özellikte geçiş yapılır. Bu özellik, bir öğeyi isteğe bağlı olarak ölçeklendirmenize, döndürmenize, çevirmenize veya eğmenize olanak tanır.
İşlevler modülümüzün dönüşümlerle ilgili bölümüne göz atın.
Renk
Etkileşim öncesinde, sırasında ve sonrasında renkler mükemmel bir durum göstergesi olabilir. Örneğin, bir düğmenin üzerine gelindiğinde düğme rengi değişebilir. Bu renk değişikliği, kullanıcıya düğmenin tıklanabilir olduğuna dair geri bildirim sağlayabilir.
color
, background-color
ve border-color
özellikleri, etkileşim sonrasında rengin geçirilebileceği alanlardan yalnızca birkaçıdır.
Renkle ilgili modülümüze göz atın.
Gölgeler
Gölgeler, genellikle yükseklik değişikliğini (kullanıcı odağı gibi) gösterecek şekilde aktarılır.
Gölgeler hakkındaki modülümüze göz atın.
Filtreler
filter
, çalışırken grafik efektleri eklemenize olanak tanıyan güçlü bir CSS özelliğidir. Farklı filter
durumları arasında geçiş yaparak oldukça etkileyici sonuçlar elde edebilirsiniz.
Filtrelerle ilgili modülümüze göz atın.
Geçiş tetikleyicileri
CSS'niz, CSS geçişlerinin etkinleşmesi için durum değişikliği ve bu durum değişikliğini tetikleyen bir etkinlik içermelidir. Bu tür bir tetikleyiciye örnek olarak :hover
sözde sınıf verilebilir. Bu sözde sınıf, kullanıcı imleciyle bir öğenin üzerine geldiğinde eşleşir.
Öğelerinizdeki durum değişikliklerini tetikleyebilecek bazı sanal sınıfların ve etkinliklerin listesi aşağıda verilmiştir.
:hover
: İmleç öğenin üzerindeyse eşleşir.:focus
: Öğe odaklanmışsa eşleşir.:focus-within
: Öğe veya alt öğelerinden herhangi biri odaklanmışsa eşleşir.:target
: Geçerli URL'nin parçası, öğenin kimliğiyle eşleştiğinde eşleşir.:active
: Öğe etkinleştirilirken eşleşir (genellikle fare üzerine bastırıldığında) eşleşir.- JavaScript'ten
class
değişikliği: Bir öğenin CSSclass
'si JavaScript aracılığıyla değiştiğinde, CSS değişen uygun özellikleri geçirir.
Giriş veya çıkış için farklı geçişler
Üzerine gelme/odaklama için farklı transition
özellikleri ayarlayarak bazı ilginç efektler oluşturabilirsiniz.
.my-element {
background: red;
/* This transition is applied on the "exit" transition */
transition: background 2000ms ease-in;
}
.my-element:hover {
background: blue;
/* This transition is applied on the "enter" transition */
transition: background 150ms ease;
}
Erişilebilirlikle ilgili dikkat edilmesi gerekenler
CSS geçişleri herkese uygun değildir. Geçişler ve animasyonlar bazı kişilerde mide bulantısına veya rahatsızlığa neden olabilir. Neyse ki CSS'de, kullanıcının cihazında daha az hareket etmeyi tercih edip etmediğini algılayan prefers-reduced-motion
adlı bir medya özelliği bulunuyor.
/*
If the user has expressed their preference for
reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
.my-element {
transition: none;
}
}
/*
If the browser understands the media query and the user
explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
.my-element {
transition: transform 250ms ease;
}
}
Bu medya özelliğiyle ilgili daha fazla bilgi edinmek için tercihler-azaltılmış-hareketli: Bazen daha az hareket daha iyidir başlıklı blog yayınımıza göz atın.
Performansla ilgili konular
CSS geçişleriyle çalışırken belirli CSS özellikleri için geçişler eklerseniz performans sorunlarıyla karşılaşabilirsiniz. Örneğin, width
veya height
gibi özellikler değiştiğinde, içeriği sayfanın geri kalanında aktarırlar. Bu, CSS'yi geçişin her bir çerçevesi için etkilenen her öğe için yeni konumları hesaplamaya zorlar. Mümkün olduğunda bunun yerine transform
ve opacity
gibi özellikleri kullanmanızı öneririz.
Bu konuyla ilgili ayrıntılı bir inceleme için yüksek performanslı CSS animasyonları rehberimize göz atın.
Öğrendiklerinizi sınayın
Geçişlerle ilgili bilginizi test edin
Hangi geçiş özelliği yumuşak geçişi belirtmek içindir?
transition-duration
transition-easing
transition-cubic-bezier
transition-timing-function
animation-ease
En iyi uygulama, transition-property: all
kullanmaktır
all
belirtilmesi, performans sorunlarına ve istenmeyen geçişlere neden olabilir.Tüm mülklerin geçişi yapılabilir.
font-family
gibi mülklerde geçiş yapılamaz.