IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

animation-fill-mode - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti animation-fill-mode nastavujeme co se děje s elementem, když je animace pozastavená (když skončí nebo čeká na začátek).

Hodnoty

  • none (výchozí) - Po skončení (nebo před začátkem) je element s animací na místě, kde je umístěn v HTML.
  • forwards - Po skončení animace zůstává element na pozici, kde zastavil.
  • backwards - Když je nastaveno animation-delay, element čeká na začátek animace na místě, kde také animace začíná.
  • both - Nastaví se obě předchozí hodnoty.

Ukázka

Vytvořme si červený čtverec o velikosti 100px × 100px s posuvnou animací trvající 3 sekundy a s čekáním na začátek animace 4 sekundy. Když se animace nebude přehrávat, bude na místě, kde animace končí a v tomto případě i začíná (hodnota both).

<!DOCTYPE html>
<html>
        <head>
                <style>
                div
                {
                        width: 100px;
                        height: 100px;
                        background-color: red;
                        position: absolute;
                        animation: animace 3s linear 4s;
                        animation-fill-mode: both;
                }
                @keyframes animace
                {
                        0%, 100% { left: 100px; top: 100px; }
                        25% { left: 250px; top: 100px; }
                        50% { left: 250px; top: 250px; }
                        75% { left: 100px; top: 250px; }
                }
                </style>
        <title>animation-fill-mode</title>
        </head>
        <body>
                <div></div>
        </body>
</html>

Výsledek:

Vlastnost animation-fill-mode v CSS 3 - Ostatní CSS vlastnosti

Minulý zápis animace si můžeme zkrátit, abychom měli vše krásně přehledně. Pro zkrácení zápisu však musíme ještě nejdříve definovat tyto atributy:

  1. animation-name - Jméno animace
  2. animation-duration - Délka animace
  3. animation-timing-function - Způsob (a rychlost) animace
  4. animation-delay - Doba před spuštěním animace
  5. animation-direction - Směr (a rychlost) animace
animation: animace 3s linear 4s normal both;

 

Všechny články v sekci
Ostatní CSS vlastnosti
Článek pro vás napsal Jan Lupčík
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.
Aktivity