transition-timing-function :

Oluşturacağımız geçişlere daha estetik geçişler sağlamak için kullanılan fonksiyonlardır.

Örnek

div {
  background: green;
  width: 200px;
  height: 20px;
  -webkit-transition-property: height; /* Safari */
   transition-property: height;
  -webkit-transition-duration: 3s; /* Safari */
   transition-duration: 3s;
   transition-timing-function: ease;
}
div:hover {
  height: 100px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer	Açıklama
ease	Animasyonun yavaş başlayıp hızlanması ve yavaş bitmesi ile sonuçlanan animasyon tipidir.
linear	Başlangıç ve Bitiş hızı aynı olan geçiş tipidir.
Ease-in	Animasyonun yavaş başlamasını sağlayan geçiş tipi.
Ease-out	Animasyonun yavaş bitmesini sağlayan geçiş tipi.
Ease-in-out	Yavaş başlayıp yavaş biten cublic-bezier eş değer bir geçiş tipi.
Cublic-bezier	Manuel olarak ayarladığımız geçiş tipidir.0 ve 1 arasında değerler alabilir.
İnital
İnherit

Tarayıcı Desteği

26.0 4.0-webkit	16.0 4.0-moz	10.0	6.1 3.1-webkit	12.1 10.5-o