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-iteration-count - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti animation-iteration-count nastavujeme kolikrát se bude animace opakovat.

Hodnoty

  • 1 (výchozí) - Animace se přehraje jen jednou bez opakování.
  • číslo - Číslo definuje kolikrát se animace bude opakovat.
  • infinite - Animace se bude opakovat donekonečna.

Ukázka

Vytvořme si černý čtverec o velikosti 100px × 100px s posuvnou animací trvající 3 sekundy. Tato animace se bude přehrávat navždy (tedy pořád) - využijeme hodnotu infinite.

<!DOCTYPE html>
<html>
        <head>
                <style>
                div
                {
                        width: 100px;
                        height: 100px;
                        background-color: black;
                        position: absolute;
                        animation: animace 3s linear;
                        animation-iteration-count: infinite;
                }
                @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-iteration-count</title>
        </head>
        <body>
                <div></div>
        </body>
</html>

Výsledek:

animation-iteration-count - Ostatní CSS vlastnosti

Zápis animace si můžeme zkrátit, abychom nemuseli vypisovat všechny atributy ručně. Pro zkrácení však musíme 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
animation: animace 3s linear 0s infinite;

 

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