⌘K

animation-fill-mode Özelliği

animation-fill-mode özelliği, animasyonun bitiminden sonra hangi konumda duracağını belirler. Varsayılan olarak animasyon başlangıç değerine döner ve bu pek hoş görünmeyebilir.

Sözdizimi

cssseçici {
  animation-fill-mode: backwards | forwards | both | none;
}

Değerler

Değer Açıklama
none Eğer animasyonda bir gecikme varsa - gecikme süresi boyunca öge olduğu yerde kalacak, sonra da sıçrayarak 0% karesine geçecektir. Animasyon bittikten sonra öge, durduğu durumda kalmaz, başlangıç durumuna sıçrar.
backwards Bir gecikme olsa bile, sayfa yüklendikten sonra ögenin 0% karesine gitmesini sağlar animation-delay, ve animasyon başlayana kadar orada kalır. Animasyon bittikten sonra öge, durduğu durumda kalmaz, başlangıç durumuna sıçrar.
forwards Tarayıcıya, animasyon bittikten sonra ögenin durduğu durumda kalacağını belirtir.
both Backwards ve forwards'ı içerir - sayfa yüklendikten sonra öge 0% karesine yerleşir ve animasyon bittikten sonra öge durduğu yerde kalır.

Varsayılan değer: none.

Örnek . None değeri

Bu örnekte, öge için margin-left 300px olarak ayarlanmıştır, animasyonun ilk karesi için ise 0px olarak. animation-delay gecikmesi olmadığından, öge sayfa yüklendikten sonra 300px değil, 0px değerine gelecektir. Ayrıca, animasyon bittikten sonra başlangıç değerine sıçrayacaktır: 

html<div id="elem"></div>
css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  margin-left: 300px;
  animation-fill-mode: none;
  animation-delay: 0s;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Örnek . None değeri

Bu örnekte, öge için margin-left 300px olarak ayarlanmıştır, animasyonun ilk karesi için ise 0px olarak. Ayrıca öge için animation-delay gecikmesi 3 saniye olarak ayarlanmıştır, bu yüzden öge sayfa yüklendikten sonra 0px değil, 300px değerine gelecek ve animasyon başlayana kadar orada 3 saniye duracak, sonra sıçrayarak 0px değerine geçecek - ve animasyon oradan başlayacak. Ayrıca, animasyon bittikten sonra başlangıç değerine sıçrayacaktır: 

html<div id="elem"></div>
css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  margin-left: 300px;
  animation-fill-mode: none;
  animation-delay: 0s;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Örnek . Backwards değeri

Bu örnekte, öge için margin-left 300px olarak ayarlanmıştır, animasyonun ilk karesi için ise 0px olarak. Ayrıca öge için animation-fill-mode backwards değerine ayarlanmıştır, bu yüzden öge sayfa yüklendikten sonra animation-fill-mode none değerinde olduğu gibi 300px değil, 0px değerine gelecektir. Ayrıca, animasyon bittikten sonra başlangıç değerine sıçrayacaktır: 

html<div id="elem"></div>
css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  margin-left: 300px;
  animation-fill-mode: backwards;
  animation-delay: 0s;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Örnek . None değeri ve tekrar sayısı 1

Bu örnekte, öge için margin-left 300px olarak ayarlanmıştır, animasyonun ilk karesi için ise 0px olarak. Ayrıca öge için animation-delay gecikmesi 3 saniye olarak ayarlanmıştır, bu yüzden öge sayfa yüklendikten sonra 0px değil, 300px değerine gelecek ve animasyon başlayana kadar orada 3 saniye duracak, sonra sıçrayarak 0px değerine geçecek - ve animasyon oradan başlayacak. animation-fill-mode none değerine ayarlandığı için, animasyon oynatıldıktan sonra öge başlangıç değerine dönecektir: 

html<div id="elem"></div>
css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  margin-left: 300px;
  animation-fill-mode: none;
  animation-delay: 3s;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Örnek . Forwards değeri ve tekrar sayısı 1

Bu örnekte animation-fill-mode forwards değerine ayarlanmıştır ve animasyon tekrar sayısı - 1 olarak. Animasyon oynatıldıktan sonra öge, animasyonun bittiği konumda kalacak, başlangıç noktasına sıçramayacaktır.

Ayrıca, öge için margin-left 300px olarak ayarlanmıştır, animasyonun ilk karesi için ise 0px olarak. Ayrıca öge için animation-delay gecikmesi 3 saniye olarak ayarlanmıştır, bu yüzden öge sayfa yüklendikten sonra 0px değil, 300px değerine gelecek ve animasyon başlayana kadar orada 3 saniye duracak, sonra sıçrayarak 0px değerine geçecek - ve animasyon oradan başlayacak: 

html<div id="elem"></div>
css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  margin-left: 300px;
  animation-fill-mode: forwards;
  animation-delay: 3s;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Örnek . Both değeri ve tekrar sayısı 1

Bu örnekte animation-fill-mode both değerine ayarlanmıştır ve animasyon tekrar sayısı - 1 olarak. Sayfa yüklendikten sonra öge animasyonun ilk karesinde duracaktır (300px değil, 0px değerinde), ve animasyon oynatıldıktan sonra öge animasyonun bittiği konumda kalacak, başlangıç noktasına sıçramayacaktır: 

html<div id="elem"></div>
css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  margin-left: 300px;
  animation-fill-mode: both;
  animation-delay: 3s;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Ayrıca Bakınız

Backanimation-direction ÖzelliğiNextanimation-play-state özelliği