CSS Geçişler

CSS Geçişler

CSS geçişleri, belirli bir süre içinde özellik değerlerini pürüzsüz bir şekilde değiştirmenizi sağlar.

Bu elemente fareyi sürükleyin, CSS geçiş etkisini görmek için:

CSS

Bu bölümde aşağıdaki özellikleri öğreneceksiniz:

  • geçiş
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Geçişlerin tarayıcı desteği

Tabloda belirtilen numaralar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü gösterir.

özellik Chrome IE Firefox Safari Opera
geçiş 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

CSS geçişlerini nasıl kullanırım?

Geçiş etkisini oluşturmak için iki şeyin açıkça belirlenmesi gereklidir:

  • Etki eklemek istediğiniz CSS özelliği
  • Etki süresi

Dikkat:Eğer süre belirtilmemişse, geçiş etkisi olmaz çünkü varsayılan değer 0'dır.

Aşağıdaki örnek, 100px * 100px boyutunda kırmızı <div> elementini gösterir. <div> elementi width özelliğine 2 saniye süren geçiş etkisi de tanımlar:

örnek

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

Belirtilen CSS özelliği (width) değeri değiştiğinde geçiş etkisi başlar.

Şimdi, <div> elementi üzerinde fareyi sürüklediğinizde width özelliğine yeni bir değer atayalım:

örnek

div:hover {
  width: 300px;
}

Kendiniz deneyin

Lütfen dikkat edin, imleç element üzerinde kaldırıldığında yavaş yavaş orijinal stiline dönüyor.

Birkaç özellik değeri değiştirme

Aşağıdaki örnekte, width ve height özelliklerine her ikisi de geçiş etkisi eklenmiştir, width 2 saniye, height 4 saniye:

örnek

div {
  transition: width 2s, height 4s;
}

Kendiniz deneyin

Geçiş hız eğrisini belirleme

transition-timing-function Özellik, geçiş etkisinin hız eğrisini belirler.

transition-timing-function özelliği aşağıdaki değerleri kabul eder:

  • ease - Başlangıçta yavaş, ardından hızlanır ve sonunda yavaşlayan geçiş etkisini belirler (varsayılan)
  • linear - Başlangıçtan bitişe aynı hızda olan geçiş etkisini belirler
  • ease-in - Yavaşça başlayan geçiş etkisini belirler
  • ease-out - Yavaşça biten geçiş etkisini belirler
  • ease-in-out - Başlangıç ve bitişte yavaş geçiş etkisini belirler
  • cubic-bezier(n,n,n,n) - Üç katlı Bezier fonksiyonunda kendi değerlerinizi tanımlamanıza olanak tanır

Aşağıdaki örnek, kullanılabilecek bazı farklı hız eğrisini gösterir:

örnek

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Kendiniz deneyin

Gecikmeli geçiş etkisi

transition-delay Özellik, geçiş etkisinin gecikmesini (saniye cinsinden) belirler.

Aşağıdaki örnekte, başlamadan önce 1 saniye gecikme vardır:

örnek

div {
  transition-delay: 1s;
}

Kendiniz deneyin

Geçiş + Çevirme

Aşağıdaki örnekte, geçiş etkisini eklemek için kullanılır:

örnek

div {
  transition: width 2s, height 2s, transform 2s;
}

Kendiniz deneyin

Daha fazla geçiş örneği

CSS geçiş özelliklerini aşağıdaki gibi tek tek belirtebilirsiniz:

örnek

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

Kendiniz deneyin

veya kısaltılmış olarak kullanın geçiş Özellikler:

örnek

div {
  transition: width 2s linear 1s;
}

Kendiniz deneyin

CSS geçiş özellikleri

Aşağıdaki tablo, tüm CSS geçiş özelliklerini içerir:

özellik tanım
geçiş Dört geçiş özelliğini tek bir özelliğe ayarlamak için kullanılan kısa isim özelliği.
transition-delay Geçiş etkilerinin gecikmesini saniye olarak belirler.
transition-duration Geçiş etkilerinin kaç saniye veya milisaniye süreceğini belirler.
transition-property Geçiş etkilerinin hedef aldığı CSS özelliğinin adını belirler.
transition-timing-function Geçiş etkilerinin hız eğrisini belirler.