Geçişler

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 CSS class'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