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 (Daha fazla detay) |
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>Tarayıcı Desteği
| Chrome | Firefox | Edge | Internet Explorer | Opera | Safari | |
|---|---|---|---|---|---|---|
animation-fill-mode
|
43 -webkit-
|
16
-webkit-
|
12
-webkit-
|
10 |
30
-webkit-
|
9
-webkit-
|
Destekliyor
Desteklemiyor
