CSS transition-timing-function özelliği

Tanım ve kullanım

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

Bu özellik, geçiş etkisinin zamanla değişmesini sağlar.

Ayrıca bkz:

CSS dersleri:CSS geçiş

HTML DOM referans el kitabı:transitionTimingFunction özelliği

Örnek

Örnek 1

Başlangıçtan bitişe kadar aynı hızda geçiş etkisi:

div
{
transition-timing-function: linear;
}

Kişisel olarak deneyin

CSS dilbilgisi

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

Özellik değeri

Değer Açıklama
linear Yavaş başlama ve bitme ile geçiş etkisi belirleyin (cubic-bezier(0,0,1,1) eşittir).
ease Yavaş başlama, ardından hızlanma ve ardından yavaş bitme ile geçiş etkisi belirleyin (cubic-bezier(0.25,0.1,0.25,1)).
ease-in Yavaş başlama ile geçiş etkisi belirleyin (cubic-bezier(0.42,0,1,1) eşittir).
ease-out Yavaş bitme ile geçiş etkisi belirleyin (cubic-bezier(0,0,0.58,1) eşittir).
ease-in-out Yavaş başlama ve bitme ile geçiş etkisi belirleyin (cubic-bezier(0.42,0,0.58,1) eşittir).
cubic-bezier(n,n,n,n) cubic-bezier fonksiyonunda kendi değerlerinizi tanımlayın. Olası değerler 0 ile 1 arasında olan sayısal değerlerdir.

İpucu:Farklı değerleri örneklerde test ederek, onların çalışma prensiplerini daha iyi anlamak için lütfen:

Teknik ayrıntılar

Öntanımlı değer: ease
Mirasçılık: hayır
Sürüm: CSS3
JavaScript dilbilgisi: nesne.style.transitionTimingFunction="linear"

Daha fazla örnek

Örnek 2

Farklı fonksiyon değerlerini daha iyi anlamak için, beş farklı değere sahip beş farklı div öğesini aşağıda göstereceğiz:

#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;}

Kişisel olarak deneyin

Örnek 3

Önceki örnekle aynı, ancak hız eğrisini cubic-bezier ile belirliyoruz:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

Kişisel olarak deneyin

Tarayıcı desteği

Tablo içindeki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

İlk sürümü kullanmak için -webkit-、-moz- veya -o- ile başlayan rakamlar.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-