CSS animasyonu Özellik
Örnek
Shorthand özelliğini kullanarak bir animasyonu bir <div> öğesine bağlama:
div
{
animation: mymove 5s infinite;
}
Tanım ve Kullanım
Özellik animation
, aşağıdakiler için kestirme bir özelliktir:
- animasyon adı
- animasyon süresi
- animasyon-zamanlama-fonksiyonu
- animasyon gecikmesi
- animasyon-yineleme-sayısı
- animasyon yönü
- animasyon doldurma modu
- animasyon-oynatma-durumu
Not: Her zaman animasyon süresi özelliğini belirtin , aksi takdirde süre 0 olur ve hiçbir zaman oynatılmaz.
Varsayılan değer: | yok 0 kolay 0 1 normal hiçbiri çalışmıyor |
---|---|
Miras: | Hayır |
canlandırılabilir: | Hayır. Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS3 |
JavaScript sözdizimi: | nesne .style.animation="mymove 5s sonsuz" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
-webkit-, -moz- veya -o- ile takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.
Property | |||||
---|---|---|---|---|---|
animation | 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- |
CSS Sözdizimi
animation: name duration timing-function delay iteration-count
direction fill-mode play-state;
Mülk değerleri
Value | Description |
---|---|
animation-name | Specifies the name of the keyframe you want to bind to the selector |
animation-duration | Specifies how many seconds or milliseconds an animation takes to complete |
animation-timing-function | Specifies the speed curve of the animation |
animation-delay | Specifies a delay before the animation will start |
animation-iteration-count | Specifies how many times an animation should be played |
animation-direction | Specifies whether or not the animation should play in reverse on alternate cycles |
animation-fill-mode | Specifies what values are applied by the animation outside the time it is executing |
animation-play-state | Specifies whether the animation is running or paused |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
İlgili Sayfalar
CSS eğitimi: CSS Animasyonları
HTML DOM referansı: animasyon özelliği