CSS3 animation Özelliği

CSS3 animation özelliği

Css animation özelliği animasyon oluşturmak için kullanılır. Ve toplam sekiz adet özellik barındırabilir.Bunlar

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

animation-play-state

Örnek:

Şimdi bir div kutusuna animation özelliği ile hareket kazandıralım.

div { animation: eren 7s infinite; -webkit-animation: eren 7s infinite; /* Chrome, Safari, Opera */ }

CSS3 animation nedir nasıl kullanılır

animation özelliği :8 diğer animasyon özelliklerini içinde barındırılabilen kısa yazım şeklidir.Bir animasyonu oluşturmak için bir adı olmalıdır .Yukarıdaki örnekte hareket edecek olan div kutusunun animasyon adı olarak "eren" adı verilmiştir ve animasyonunun 7 saniye süreceği , infinite değeri ile de sonsuz kez tekrarlanacağı belirtilmiştir.

CSS animation	CSS animation özellikleri
Varsayılan Değer:	none 0 ease 0 1 normal none running
Kalıtsallık:	yok
Animasyon Özelliği:	yok
Versiyon:	CSS3
JavaScript css animation:	object.style.animation=" eren 7s infinite"

CSS3 animation Tarayıcı Desteği

CSS Kodu:
animation	43.0 4.0 -webkit-	Desteklemiyor	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

CSS3 animation Değerleri

animation:name duration timing-function delay iteration-count direction fill-mode play-state;