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;

CSS3 animation özelliği değerleri

CSS animation değerleri	CSS animation değerleri tanımları
animation-name	Animasyon için kullanılacak isimdir.
animation-duration	Animasyonun süresini belirtmek için kullanılır.
animation-timing-function	Animasyonun hız değişikliklerini tanımlamak için kullanılır. Hızlı mı başayacak ? yavaş mı bitecek ? gibi ..
animation-delay	Animasyonda istenilen gecikme sürelerini ayarlamak için kullanılır.
animation-iteration-count	Animasyonun tekrarlanma sayısı gibi özellikler kontrol edilebilir.
animation-direction	Animasyonun yönüyle ilgli özellikler tanımlamımızı sağlar.
animation-fill-mode	Animasyon bittiğindeki davranışını düzenler..
animation-play-state	Animasyonun oynatılmasını yada durdurulması gibi işlevleri üstlenen bir özelliktir.
initial	Varsayılan değerinin özelliklerini taşır.
inherit	Soy bağından alacağı değerleri taşır.