v2.3.1
Giriş yap

CSS animation-name Özelliği

CSS3

Elemana uygulanacak animasyonu belirler. Rasgele bir isim almaz, animasyon için oluşturulan @keyframes adı ne ise aynı isme sahip olmalıdır.

Yapısı (Syntax)animation-name: animasyonAdi
Varsayılan Değer none
JavaScript Yapısı object.style.animationName="animasyonAdi"
Animasyon Özellikleri Uygulanabilir Hayır (Daha fazla detay)

Değerler

Değer Açıklama Versiyon
animasyonAdi Uygulanacak animasyonun keyframe adı. CSS3

Örnekler

boxAnimation adında bir keyframes oluşturualım ve bu animasyonu elemana uygulayalım.

<div class="box"></div>

<style>
    .box {
        width: 60px;
        height: 60px;
        background: blue;
        position: relative;
        left: 0;
        animation-name: boxAnimation;
        animation-duration: 1s;
    }
    @keyframes boxAnimation {
        to {left: 200px}
    }
</style>

Tarayıcı Desteği

  Chrome Firefox Edge Internet Explorer Opera Safari
animation-name 43
-webkit-
16
-webkit-
12
-webkit-
10 30
-webkit-
9
-webkit-
Destekliyor
Desteklemiyor
tayfunerbilen
150 gün önce eklendi - 980 kez görüntülendi.
Github'da Düzenle
Önceki animation-iteration-count Sonraki animation-play-state