Giriş yap

CSS animation-fill-mode Özelliği
CSS3

Animasyon başlamadan önce ve bittikten sonra ne olacağı belirlenir. Örneğin animasyon başlamadan önce, ilk karenin stilleri uygulanabilir, animasyon bittikten sonra son karenin stilleriyle kalabilir ya da her ikisi olabilir gibi.

Yapısı (Syntax)animation-fill-mode: none | forwards | backwards | both

Varsayılan Değer none
JavaScript Yapısı object.style.animationFillMode="forwards"
Animasyon Özellikleri Uygulanabilir Hayır

Değerler

Değer Açıklama Versiyon
none Varsayılan değerdir. Animasyon işlemi bittikten sonra animasyon uygulanan elemanın değerleri ilk haline döner. CSS3
forwards Animasyon işlemi bittikten sonra uygulanan değerler kalır. Örneğin rengi maviyse ve animasyon ile rengi kırmızıya dönmüşse, animasyon bittiğinde rengi kırmızı olarak kalır. CSS3
backwards Animasyon başlamadan önce ilk karedeki değerler uygulanır ve bittiğinde animasyon uygulanan eleman varsayılan değerlerine geri döner. Örneğin animasyon uygulanan elemanın rengi maviyse ve animasyonun ilk karesinde rengini kırmızıya döndürüyorsak, animasyon başlamamış bile olsa ilk karedeki değerler uygulanır. Animasyona başlangıç süresi verdiğimizde, bunu daha net görebiliriz. CSS3
both Animasyon başlamadan önce ilk karedeki değerler uygulanır, bittiğinde ise son karedeki uygulanan değerlerle birlikte kalır. Kısaca forwards ve backwards değerlerinin ikisini de kullanmak için kullanılır. CSS3

Örnekler

Animasyon bittikten sonra son karedeki değerlerde kalan bir örnek hazırlayalım.

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

<style>
    .box {
        width: 60px;
        height: 60px;
        background: blue;
        position: relative;
        animation: boxAnimation 1s;
        animation-fill-mode: forwards;
    }
    @keyframes boxAnimation {
        from {left: 0}
        to {left: 200px; background: green}
    }
</style>

Animasyon başlamadan önce ilk karedeki değerleri alan bir örnek hazırlayalım. Bunun için animation-delay kullanarak animasyonun başlama süresini biraz artırarak örneği daha net görelim.

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

<style>
    .box {
        width: 60px;
        height: 60px;
        background: blue;
        position: relative;
        animation: boxAnimation 1s;
        animation-delay: 1s;
        animation-fill-mode: backwards;
    }
    @keyframes boxAnimation {
        from {background: red; left: 0}
        to {left: 200px; background: green}
    }
</style>

Şimdi de hem animasyon başlamadan önce ilk karedeki değerleri alan hem de animasyon bitince son karedeki değerler uygulanarak kalacak bir animasyon oluşturalım.

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

<style>
    .box {
        width: 60px;
        height: 60px;
        background: blue;
        position: relative;
        animation: boxAnimation 1s;
        animation-delay: 1s;
        animation-fill-mode: both;
    }
    @keyframes boxAnimation {
        from {background: red; left: 0}
        to {left: 200px; background: green}
    }
</style>

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