Animații CSS. Modul de completare pentru o animație. Proprietatea animation-fill-mode. Valori: none, forwards, backwards, both.

Precizați modul de completare (fill-mode) pentru o animație

Animațiile CSS nu afectează un element înainte de a fi redat primul cadru-cheie (keyframe) sau după ce ultimul cadru-cheie (keyframe) este redat. Proprietatea animation-fill-mode poate înlocui acest comportament.

Proprietatea animation-fill-mode specifică un stil pentru elementul țintă atunci când animația nu se joacă (înainte de a începe, după ce se termină, sau ambele).

Proprietatea animation-fill-mode poate avea următoarele valori:
 

• none - Valoare implicită. Animația nu va aplica niciun stil la element înainte sau după executarea acestuia
• forwards - Elementul va pastra valorile stilului setate de ultimul cadru cheie (keyframe) (depinde de animation-direction și animation-iteration-count)
• backwards - Elementul va obține valorile de stil setate de primul cadru-cheie (keyframe) (depinde de animation-direction) și îl va păstra în timpul perioadei de întârziere a animației
• both - Animația va respecta regulile atât în ​​față cât și înapoi (forwards și backwards), extinzând proprietățiile de animație în ambele direcții

Următorul exemplu permite elementului <div> să păstreze valorile stilului de la ultimul cadru cheie (keyframe) la încheierea animației:

Exemplu:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}