Geçişler

CSS Podcast'i - 044: Geçişler 'nı inceleyin.

Bir web sitesiyle etkileşimde bulunurken birçok öğenin duruma sahip olduğunu fark edebilirsiniz. Örneğin, açılır listeler açık veya kapalı durumda olabilir. Odaklandıklarında veya ü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 interpolasyon yapabiliriz. İkisi arasındaki geçiş, etkileşimin nedeni ile etkisi hakkında görsel yön, destek ve ipuçları sağlayarak kullanıcı deneyimini geliştiriyor.

Geçiş özellikleri

Geçişleri CSS'de kullanmak için çeşitli geçiş özelliklerini veya transition kısa ö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 özellik adını kabul eder.

İsteğe bağlı olarak her bir mülkün geçişinin yapılması gerektiğini belirtmek için transition-property: all kullanabilirsiniz.

transition-duration

transition-duration özelliği, geçişin tamamlanması için gereken süreyi tanımlamak amacıyla kullanılır.

transition-duration, saniye (s) veya milisaniye (ms) cinsinden zaman birimlerini kabul eder ve varsayılan olarak 0s değerini alır.

transition-timing-function

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 biraz yapay görünebilir: Gerçek hayatta, nesnelerin ağırlığı vardır ve anında durup başlatılamazlar. Yavaş yavaş veya yumuşak geçiş yaparak geçişleri daha canlı ve doğal hale getirebilirsiniz.

CSS Animasyonu modülümüzde zamanlama işlevlerine iyi bir genel bakış sunulmaktadır.

Farklı zamanlama işlevlerini gerçek zamanlı olarak denemek için DevTools'nı kullanabilirsiniz.

geçiş-gecikmesi

Geçişin başlayacağı zamanı 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 özellik, örneğin saniye (s) veya milisaniye (ms) gibi bir zaman birimi kabul eder.

Bu özellik, grupta takip eden her bir öğe için daha uzun bir transition-delay değeri ayarlanarak gerçekleştirilen geçişleri karıştırmak için yararlıdır.

transition-delay, hata ayıklama için de faydalıdır. Gecikmeyi negatif bir değere ayarlamak, zaman çizelgesinde daha ileri bir geçiş başlatabilir.

kısaltma: geçiş

Çoğu CSS özelliğinde olduğu gibi, kısa bir sürümü 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 yapılamaz?

CSS yazarken, hangi özelliklerin animasyonlu geçişlere sahip olması gerektiğini belirtebilirsiniz. Animasyonlanabilir CSS özellikleri hakkındaki bu MDN listesine bakın.

Genel olarak, yalnızca "orta durum" durumuna sahip olabilecek öğeler arasında geçiş yapar. Örneğin, "orta durumun" ne olduğu belirsiz olduğundan font-family için geçiş eklemek mümkün değildir serif ile monospace arasındaki gibi görünür. Diğer yandan, font-size içine geçişler eklenebilir çünkü birimin birimi, ara değer arasında interpolasyon uygulanabilen bir uzunluktur.

Geçişi yapabileceğiniz bazı yaygın özellikleri burada bulabilirsiniz.

Dönüştür

transform CSS özelliği, daha az pil tüketen daha akıcı animasyonlar sağlayan bir GPU hızlandırmalı özelliği olduğundan genellikle geçişi yapılır. Bu özellik, bir öğeyi rastgele ölçeklendirmenize, döndürmenize, çevirmenize veya eğmenize olanak tanır.

İşlevler modülümüzdeki dönüşümler hakkındaki bölüme göz atın.

Renk

Etkileşim öncesinde, esnasında ve sonrasında, renkler ne durumda olduğunuzun iyi bir göstergesi olabilir. Örneğin, fareyle üzerine gelinen bir düğmenin rengi değişebilir. Bu renk değişikliği, kullanıcıya düğmenin tıklandığına dair geri bildirim sağlayabilir.

color, background-color ve border-color özellikleri, rengin gösterilebileceği yerlerden yalnızca birkaçıdır. sonra da geçişi gerçekleştirilir.

Renk konulu modülümüze göz atın.

Gölgeler

Gölgelerin geçişi genellikle yükseklik değişikliğini gösterir (örneğin, kullanıcı odağından).

Gölgeler hakkındaki modülümüze göz atın.

Filtreler

filter, anında grafik efektleri eklemenize olanak tanıyan güçlü bir CSS özelliğidir. Farklı filter durumları arasında geçiş yapıldığında oldukça etkileyici sonuçlar elde edilebilir.

Filtrelerle ilgili modülümüze göz atın.

Geçiş tetikleyicileri

CSS'nizin, CSS geçişlerinin etkinleştirilmesi için bir durum değişikliği ve bu durum değişikliğini tetikleyen bir etkinlik içermesi gerekir. Bu tür tetikleyicilere ö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.

Aşağıda, öğelerinizde durum değişikliklerini tetikleyebilecek bazı yapay sınıfların ve etkinliklerin listesi verilmiştir.

• :hover: İmleç öğenin üzerindeyse eşleşir.
• :focus: Öğe odaklanılmışsa eşleşir.
• :focus-within : öğe veya alt öğelerinden biri emin olabilirsiniz.
• :target: Geçerli URL'nin parçası, öğenin kimliğiyle eşleştiğinde eşleşir.
• :active: Öğenin etkinleştirildiği zamanla eşleşir (genellikle basılı olması gerekir).
• JavaScript'ten class değişikliği: Bir öğenin CSS class'si şunun üzerinden değiştiğinde: JavaScript, CSS değiştirilmiş uygun mülklerin geçişini yapacaktır.

Giriş veya çıkış için farklı geçişler

Fareyle üzerine gelme/odaklama sırasında 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 gereken noktalar

CSS geçişleri herkese uygun değildir. Geçişler ve animasyonlar bazı kişilerde hareket hastalığına veya rahatsızlığa neden olabilir. Neyse ki CSS, kullanıcının cihazında daha az hareket olmasını tercih edip etmediğini algılayan prefers-reduced-motion adlı bir medya özelliğine sahiptir.

/*
  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ği hakkında daha fazla bilgi edinmek için prefers-reduced-motion: Bazen daha az hareket daha çok olur başlıklı blog yayınımıza göz atın.

Performansla ilgili konular

CSS geçişleriyle çalışırken, belirli CSS mülkleri 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ına aktarır. Bu işlem, CSS'yi geçişin her karesi 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 konuyu ayrıntılı olarak incelemek için yüksek performanslı CSS animasyonları rehberimize göz atın.

Öğrendiklerinizi sınayın

Geçişlerle ilgili bilginizi test edin