CSS3 animation-play-state Özelliği

CSS3 animation-play-state

Css ile oluşturulan animasyonun durdurulup devam ettirilmesini sağlayan özellik animation-play-state özelliğidir.

Örnek:

Aşağıda verilen örnekte animasyona running değeri verildiği için animasyon çalışacaktır.

div { animation-play-state: running; -webkit-animation-play-state: running; /* Chrome, Safari, Opera */ }

CSS3 animation-play-state nedir nasıl kullanılır

Oluşturulan animasyonun devam ettirmek ya da durdurulmak istenildiğinde animation-play-state özelliği kullanılır. Tavsiye edilen ise kontrolü javascript ile buttonlarla kontrolü sağlamaktır.

CSS animation-play-state	CSS animation-play-state özellikleri
Varsayılan Değer:	running
Kalıtsallık:	yok
Animasyon Özelliği:	yok
Versiyon:	CSS3
JavaScript animation-play-state:	object.style.animationPlayState="paused"

CSS3 animation-play-state Tarayıcı Desteği

The numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

CSS Kodu:
animation-play-state	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-play-state Değerleri

animation-play-state:paused|running|initial|inherit;

CSS3 animation-play-state özelliği değerleri

CSS animation-play-state değerleri	CSS animation-play-state değerleri tanımları	CSS Örnek Uygulamalar
paused	Paused değeri animasyonun durmasını sağlayan değerdir.
running	Varsayılan başlangıç değeri olan "running" değeri animasyonu devam ettirir..
initial	Bu özellliğin başlangıç değerine dönüşmesini sağlar.
inherit	Soybağından aldığı değeri taşır.