Örnek
A bir animasyon bağlanması <div> kestirme özelliğini kullanarak, elemanın:
div
{
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
Kendin dene " Tanımı ve Kullanımı
animasyon özelliği animasyon özelliklerinin sekiz kestirme bir özelliktir:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Note: Her zaman animasyon süreli özelliğini belirtin aksi süresi 0'dır ve oynanacak asla.
| Varsayılan değer: | none 0 ease 0 1 normal none running |
|---|---|
| Miras: | no |
| canlandırılabilir: | no. Read about animatable |
| Versiyon: | CSS3 |
| JavaScript sözdizimi: | object .style.animation="mymove 5s infinite" Try it |
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar -moz-, -webkit- ardından veya önek ile çalıştı ilk sürümü belirtmek -O-.
| özellik | |||||
|---|---|---|---|---|---|
| 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: Mülkiyet Değerler değer Açıklama animation-name Eğer seçicinin bağlanma anahtar karesinin adı istiyorum belirtir animation-duration Bir animasyon tamamlamak için kaç saniye veya milisaniye belirtir
animation-timing-function animasyon hız eğrisi belirtir animation-delay animasyon başlayacaktır önce bir gecikme belirtir
animation-iteration-count Bir animasyon oynanması gerektiğini kaç kez belirtir animation-direction animasyon alternatif döngülere tersten oynaması gerektiğini olup olmadığını belirtir animation-fill-mode Ne değerler o çalıştırdığı süre dışında animasyon ile uygulanır belirtir animation-play-state animasyon çalışıyor veya duraklatılmış olduğunu belirtir initial varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun inherit üst öğesinden bu özelliği devralır. Yaklaşık miras oku
İlgili Sayfalar
CSS3 öğretici: CSS3 Animasyonlar
HTML DOM referansı: animation property