CSS animation-direction Özelliği

CSS3

Bu özellik, animasyonun oynatılacağı yönü belirlemek için kullanılır. Örneğin animasyon ilk kareden başlayıp sonda bitebilir, son kareden başlayıp ilk karede bitebilir ya da animasyon ilk kareden başlar, son kareye geldiğinde tekrar ilk kareye geri döner ve bu şekilde tekrarlar ya da tam tersi son kareden başlar, ilk kareye geldiğinde animasyon kendini tekrar eder.

Yapısı (Syntax)animation-direction: normal | reverse | alternate | alternate-reverse

NOT

Normal bir animasyon işleminde bu özelliği kullanmanıza gerek yoktur. Zaten varsayılan olarak animasyon olması gerektiği gibi uygulanır. Özelliğin getirdiği yeniliği görebilmek için infinite ile tekrar eden animasyon olarak daha net göreceğimiz için örnekleri buna göre oluşturdum.

Varsayılan Değer	normal
JavaScript Yapısı	`object.style.animationDirection="reverse"`
Animasyon Özellikleri Uygulanabilir	Hayır (Daha fazla detay)

Değerler

Değer	Açıklama	Versiyon
normal	Animasyon olması gerektiği gibi ilerler.	CSS3
reverse	Animasyon son kareden başlar ve ilk karede sonlanır.	CSS3
alternate	Animasyon ilk kareden başlar, son kareye geldiğinde bu sefer tam tersine son kareden başlar ve tekrar ilk karede biter.	CSS3
alternate-reverse	Animasyon son kareden başlar, ilk kareye geldiğinde bu sefer tam tersine ilk kareden başlar ve son karede biter.	CSS3

Örnekler

Son kareden başlayacak bir animasyon oluşturalım.

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

<style>
    .box {
        width: 60px;
        height: 60px;
        background: blue;
        position: relative;
        animation: boxAnimation 3s infinite;
        animation-direction: reverse;
    }
    @keyframes boxAnimation {
        from {left: 0; opacity: 0}
        to {left: 200px; opacity: 1}
    }
</style>HTML
Editörde Görüntüle

Baştan başlayıp tekrar eden bir animasyon oluşturalım.

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

<style>
    .box {
        width: 60px;
        height: 60px;
        background: blue;
        position: relative;
        animation: boxAnimation 1s infinite;
        animation-direction: alternate;
    }
    @keyframes boxAnimation {
        from {left: 0; opacity: 0}
        to {left: 200px; opacity: 1}
    }
</style>HTML
Editörde Görüntüle

Sondan başlayıp tekrar eden bir animasyon oluşturalım.

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

<style>
    .box {
        width: 60px;
        height: 60px;
        background: blue;
        position: relative;
        animation: boxAnimation 1s infinite;
        animation-direction: alternate-reverse;
    }
    @keyframes boxAnimation {
        from {left: 0; opacity: 0}
        to {left: 200px; opacity: 1}
    }
</style>HTML
Editörde Görüntüle

Tarayıcı Desteği

	Chrome	Firefox	Edge	Internet Explorer	Opera	Safari
`animation-direction`	43 `-webkit-`	16 `-webkit-`	12 `-webkit-`	10	30 `-webkit-`	9 `-webkit-`
`alternate-reverse`	1	16	12	10	12.1	6
`reverse`	1	16	12	10	12.1	6

Destekliyor

Desteklemiyor

tayfunerbilen

1597 gün önce eklendi - 3318 kez görüntülendi.

Github'da Düzenle