⌘K

Savybė animation-fill-mode

Savybė animation-fill-mode nustato, kurioje padėtyje sustoti animacijai po pabaigos. Pagal nutylėjimą animacija grįžta į pradinę reikšmę ir tai gali atrodyti ne labai gražiai.

Sintaksė

cssselektorius {
  animation-fill-mode: backwards | forwards | both | none;
}

Reikšmės

Reikšmė Aprašas
none Jei nustatytas animacijos delsimas - tai per delsimo laiką elementas liks savo vietoje, o po to šuoliu pereis prie 0% kadro. Pasibaigus animacijai elementas neliks toje būsenoje, kur sustojo, o peršoks į pradinę būseną.
backwards Priverčia elementą po puslapio įkėlimo judėti prie 0% kadro, net jei nustatytas delsimas animation-delay, ir likti ten, kol nepradės animacija. Pasibaigus animacijai elementas neliks toje būsenoje, kur sustojo, o peršoks į pradinę būseną.
forwards Nurodo naršyklei, kad pasibaigus animacijai elementas liks toje būsenoje, kur sustojo.
both Apima backwards ir forwards - po puslapio įkėlimo elementas nustatysis prie 0% kadro, o po animacijos pabaigos elementas liks ten, kur sustojo.

Reikšmė pagal nutylėjimą: none.

Pavyzdys . Reikšmė none

Šiame pavyzdyje margin-left nustatytas reikšmei 300px elementui, o pirmam animacijos kadrui - 0px. Kadangi nėra delsimo animation-delay, tai elementas po puslapio įkėlimo atsidurs 0px, o ne 300px. Be to, animacija pasibaigus šoks į pradinę reikšmę: 

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;
}

Результат:

Pavyzdys . Reikšmė none

Šiame pavyzdyje margin-left nustatytas reikšmei 300px elementui, o pirmam animacijos kadrui - 0px. Taip pat elementui nustatytas delsimas animation-delay 3 sekundėms, todėl elementas po puslapio įkėlimo atsidurs 300px, o ne 0px, ir stovės ten 3 sekundes, kol prasidės animacija, o po to šuoliu pereis prie 0px - ir animacija prasidės ten. Be to, animacija pasibaigus šoks į pradinę reikšmę: 

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;
}

Результат:

Pavyzdys . Reikšmė backwards

Šiame pavyzdyje margin-left nustatytas reikšmei 300px elementui, o pirmam animacijos kadrui - 0px. Taip pat elementui nustatytas animation-fill-mode reikšmėje backwards, todėl elementas po puslapio įkėlimo atsidurs 0px, o ne 300px, kaip buvo su animation-fill-mode reikšmėje none. Be to, animacija po pabaigos šoks į pradinę reikšmę: 

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;
}

Результат:

Pavyzdys . Reikšmė none ir pasikartojimų skaičius lygus 1

Šiame pavyzdyje margin-left nustatytas reikšmei 300px elementui, o pirmam animacijos kadrui - 0px. Taip pat elementui nustatytas delsimas animation-delay 3 sekundėms, todėl elementas po puslapio įkėlimo atsidurs 300px, o ne 0px, ir stovės ten 3 sekundes, kol prasidės animacija, o po to šuoliu pereis prie 0px - ir animacija prasidės ten. Kadangi animation-fill-mode nustatytas reikšmėje none, tai atkūrus animaciją elementas grįš į pradinę reikšmę: 

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;
}

Результат:

Pavyzdys . Reikšmė forwards ir pasikartojimų skaičius lygus 1

Šiame pavyzdyje animation-fill-mode nustatytas reikšmėje forwards, o animacijos pasikartojimų skaičius - 1. Po animacijos atkūrimo elementas liks toje padėtyje, kur baigėsi animacija, o ne šoks į pradinį tašką.

Be to, margin-left nustatytas reikšmei 300px elementui, o pirmam animacijos kadrui - 0px. Taip pat elementui nustatytas delsimas animation-delay 3 sekundėms, todėl elementas po puslapio įkėlimo atsidurs 300px, o ne 0px, ir stovės ten 3 sekundes, kol prasidės animacija, o po to šuoliu pereis prie 0px - ir animacija prasidės ten: 

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;
}

Результат:

Pavyzdys . Reikšmė both ir pasikartojimų skaičius lygus 1

Šiame pavyzdyje animation-fill-mode nustatytas reikšmėje both, o animacijos pasikartojimų skaičius - 1. Po puslapio įkėlimo elementas stovės pirmame animacijos kadre (0px, o ne 300px), o po animacijos atkūrimo elementas liks toje padėtyje, kur baigėsi animacija, o ne šoks į pradinį tašką: 

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;
}

Результат:

Taip pat žiūrėkite

BackSavybė animation-directionNextSavybė animation-play-state