transition-timing-function Özelliği

transition-timing-function özelliği, bir transition geçişinin değişim hızını (ivmesini) belirler. Örneğin, önce yavaş, sonra hızlı, sonra tekrar yavaş vb.

Sözdizimi

cssseçici {
  transition-timing-function: değer;
}

Değerler

Değer	Açıklama
`ease`	Önce yavaş, sonra hızlı, sonunda tekrar yavaş.
`ease-in`	Yavaş başlar ve kademeli olarak hızlanır.
`ease-out`	Hızlı başlar ve kademeli olarak yavaşlar.
`ease-in-out`	Önce yavaş, sonra hızlı, sonunda tekrar yavaş. `ease` değerinden hızı ile ayrılır.
`linear`	Her zaman aynı hız.
`step-start`	Animasyon yoktur, özellik anında son değerini alır.
`step-end`	Animasyon yoktur, özellik, `transition-duraton` ile belirlenen süre kadar bekler ve ardından anında son değerini alır.
`steps`	Özelliğin değeri adımlarla (sıçramalarla) değişir.
`cubic-bezier`	İsteğe bağlı bir animasyon tanımlayabilen Bezier eğrisi. Bkz. Bezier eğrisi oluşturucu.

Varsayılan değer: ease.

Farklı Değerlerin Karşılaştırılması

Tüm zamanlama fonksiyonlarının çalışmasını görmek için aşağıdaki kutuların üzerine fareyle gelin:

Örnek

Fareyi kutunun üzerine getirin - genişliğini 2 saniye içinde kademeli olarak değiştirecektir. ease-in değeri ayarlandığı için animasyon yavaş başlayacak ve kademeli olarak hızlanacaktır:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-timing-function: ease-in;
  transition-duration: 2s;
  transition-property: width;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Ayrıca Bakınız

Geçiş süresini belirleyen transition-duration özelliği,
Geçiş için özellik adını belirleyen transition-property özelliği,
Geçişten önceki gecikmeyi belirleyen transition-delay özelliği,
Geçiş için kısa yol olan transition özelliği,
Animasyon oluşturmanızı sağlayan animation özelliği