Vlastnosť animation-fill-mode

Vlastnosť animation-fill-mode nastavuje, v akej polohe sa má animácia zastaviť po skončení. V predvolenom nastavení sa animácia vráti na pôvodnú hodnotu a to nemusí vyzerať veľmi pekne.

Syntax

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

Hodnoty

Predvolená hodnota: none.

Príklad . Hodnota none

V tomto príklade je margin-left nastavený na hodnotu 300px pre prvok, a pre prvý snímok animácie - na 0px. Pretože nie je oneskorenie animation-delay, prvok sa po načítaní stránky dostane na 0px, a nie na 300px. Okrem toho, po skončení animácie skočí späť na počiatočnú hodnotu:

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

Результат:

Príklad . Hodnota none

V tomto príklade je margin-left nastavený na hodnotu 300px pre prvok, a pre prvý snímok animácie - na 0px. Tiež je pre prvok nastavené oneskorenie animation-delay na 3 sekundy, preto sa prvok po načítaní stránky dostane na 300px, a nie na 0px, a bude tam stáť 3 sekundy, potom skokom prejde na 0px - a animácia sa odtiaľ začne. Okrem toho, po skončení animácie bude prvok skákať späť na počiatočnú hodnotu:

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

Результат:

Príklad . Hodnota backwards

V tomto príklade je margin-left nastavený na hodnotu 300px pre prvok, a pre prvý snímok animácie - na 0px. Tiež je pre prvok nastavený animation-fill-mode na hodnote backwards, preto sa prvok po načítaní stránky dostane na 0px, a nie na 300px, ako to bolo pri animation-fill-mode s hodnotou none. Okrem toho, po skončení animácie bude prvok skákať späť na počiatočnú hodnotu:

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

Результат:

Príklad . Hodnota none a počet opakovaní rovný 1

V tomto príklade je margin-left nastavený na hodnotu 300px pre prvok, a pre prvý snímok animácie - na 0px. Tiež je pre prvok nastavené oneskorenie animation-delay na 3 sekundy, preto sa prvok po načítaní stránky dostane na 300px, a nie na 0px, a bude tam stáť 3 sekundy, potom skokom prejde na 0px - a animácia sa odtiaľ začne. Pretože je animation-fill-mode nastavený na hodnote none, po prehratí animácie sa prvok vráti na počiatočnú hodnotu:

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

Результат:

Príklad . Hodnota forwards a počet opakovaní rovný 1

V tomto príklade je animation-fill-mode nastavený na hodnote forwards, a počet opakovaní animácie - na 1. Po prehratí animácie prvok zostane v tej polohe, kde animácia skončila, a neskočí späť do východiskového bodu.

Okrem toho, margin-left je nastavený na hodnotu 300px pre prvok, a pre prvý snímok animácie - na 0px. Tiež je pre prvok nastavené oneskorenie animation-delay na 3 sekundy, preto sa prvok po načítaní stránky dostane na 300px, a nie na 0px, a bude tam stáť 3 sekundy, potom skokom prejde na 0px - a animácia sa odtiaľ začne:

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

Результат:

Príklad . Hodnota both a počet opakovaní rovný 1

V tomto príklade je animation-fill-mode nastavený na hodnote both, a počet opakovaní animácie - na 1. Po načítaní stránky bude prvok stáť na prvom snímku animácie (na 0px, a nie na 300px), a po prehratí animácie prvok zostane v tej polohe, kde animácia skončila, a neskočí späť do východiskového bodu:

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

Результат:

Pozri tiež