CSS3 animation-timing-function Özelliği

CSS3 animation-timing-function

Animation-timing-functionCss ile oluşturulan bir animasyonun hızının sabit olmasını ,hızlı başlayıp yavaş bitmesi gibi özelliklerini belirtebildiğimiz özelliktir.

Örnek:

Aşağıdaki örnekte animasyon hızı sürekli sabit hızda sonlanacaktır. Denemek için aşağıdaki kendiniz deneyin tuşuna basınız..

div { animation-timing-function: linear; -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */ }

CSS3 animation-timing-function nedir nasıl kullanılır

Css animation-timing-function özelliği animasyon oluştururken animasyonun istenilen karelerinde hız değişikliği oluşturulması için kullanılır.

CSS animation-timing-function	CSS animation-timing-function özellikleri
Varsayılan Değer:	ease
Kalıtsallık:	yok
Animasyon Özelliği:	yok
Versiyon:	CSS3
JavaScript animation-timing-function:	object.style.animationTimingFunction="linear"

CSS3 animation-timing-function Tarayıcı Desteği

CSS Kodu:
animation-timing-function	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

CSS3 animation-timing-function Değerleri

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

CSS3 animation-timing-function özelliği değerleri

CSS animation-timing-function values	CSS animation-timing-function değerleri tanımları	CSS Örnek Uygulamalar
linear	Animasyon başlancından sonuna kadar geçen sürede hız sabit ve aynıdır.
ease	Ease değeri kullandığında ise yavaş başlar sonra hızlanır bitiminde ise tekrar yavaşlayarak animasyon sonlanır.
ease-in	Animasyonu yavaş başlatan bir değerdir..
ease-out	Animasyonu yavaş sonlandıran bir değerdir..
cubic-bezier(n,n,n,n)	Bu değer için 0 ile 1 arasındaki değerler verilerek animasyon hızı eğrisi oluşturulması sağlanır.
initial	Bu özellliğin başlangıç değerine dönüşmesini sağlar.
inherit	Soybağından aldığı değerdir.