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

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>

tayfunerbilen
55 gün önce eklendi.
Github'da Düzenle
Önemli Başlıklar