Google ve Youtube Reklamlarını Engelleyen Tarayıcı ve Uygulama İndir

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.  

Yorumlar