v2.5.2
Giriş yap

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>

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>

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>

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
1224 gün önce eklendi - 2924 kez görüntülendi.
Github'da Düzenle
Önceki animation-delay Sonraki animation-duration