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

Bu blogdaki popüler yayınlar

HTML yorum etiketi ile öğe gizleme örneği

Linklerin Renklerini Değiştirme Örnek

YouTube Reklam Engelleyici

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

HTML Resimler

HTML bdo Etiketi Örnek