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>

Editörde Görüntüle

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

1501 gün önce eklendi - 4506 kez görüntülendi.

Github'da Düzenle