v2.5.2
Giriş yap

CSS animation Özelliği

CSS3

Tüm animasyon özelliklerinin kısa kullanımıdır. animation-name ve animation-duration zorunlu diğerleri opsiyoneldir.

Yapısı (Syntax)animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Varsayılan Değer none 0 ease 0 1 normal none running
JavaScript Yapısı object.style.animation="animasyonAdi 5s infinite"
Animasyon Özellikleri Uygulanabilir Hayır (Daha fazla detay)

Örnekler

Tüm animasyon özelliklerinin bir arada kullanıldığı örnek

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

<style>
    .box {
        width: 60px;
        height: 60px;
        background: blue;
        position: relative;
        left: 0;
        animation: boxAnimation 1s ease-in 1s infinite alternate backwards;
    }
    @keyframes boxAnimation {
        from {left: 0; background: red}
        to {left: 250px}
    }
</style>

Tarayıcı Desteği

  Chrome Firefox Edge Internet Explorer Opera Safari
animation 43
-webkit-
16
-webkit-
12
-webkit-
10 30
-webkit-
9
-webkit-
Destekliyor
Desteklemiyor
tayfunerbilen
1490 gün önce eklendi - 4486 kez görüntülendi.
Github'da Düzenle
Önceki animation-timing-function Sonraki background-attachment