CSS3 animation-name Özelliği

CSS3 animation-name

Css ile animasyon oluşturulurken @keyframes kullanılır ,animasyon kareleri olarak da düşünülebilir. Seçilen Html elemanına uygulamak için animasyon için özel benzersiz bir ad kullanılmalıdır.Bu adı belirtirken animation-name:"animasyonun ismi " şeklinde kullanılır..

Örnek:

Aşağıdaki animasyon adı "eren" olarak seçilmiştir.

div { animation-name: eren; -webkit-animation-name: eren; /* Chrome, Safari, Opera */ }

CSS3 animation-name nedir nasıl kullanılır

Css ile animasyon oluştururken @keyframes kareleri için benzersiz bir animasyon ismi oluşturulmalıdır. Çünkü o karedeki özelliklerin hangi HTML elemanına uygulanacağını belirtilmesi gerekir. Bu animation selector olarak düşünülebilir.

CSS animation-name	CSS animation-name özellikleri
Varsayılan Değer:	none
Kalıtsallık:	yok
Animasyon Özelliği:	yok
Versiyon:	CSS3
JavaScript animation-name:	object.style.animationName="eren"

CSS3 animation-name Tarayıcı Desteği

CSS Kodu:
animation-name	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 animation-name Değerleri

animation-name:keyframename|none|initial|inherit;

CSS animation-name özelliği değerleri

CSS animation-name değerleri	CSS animation-name değerleri tanımları
keyframename	İstenilen isim girilebilir.
none	Bu değer uygulandıgında animasyon gerçekleşeyecektir.
initial	Varsayılan başlangıç değerini alır.
inherit	Eğer varsa soybağından gelen değeri taşır,ona göre animasyon tekrarı gerçekleşir.