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.

Yorumlar

Popüler yayınlar

HTML Metin Biçimlendirme Etiketleri

HTML hr Etiketi

HTML em Etiketi

CSS justify-content Özelliği

HTML pre Etiketi

HTML table Etiketi

CSS align-items özelliği

HTML menu Etiketi

CSS flex-basis Özelliği

CSS content Özelliği