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:

animation-name - Jméno animace
animation-duration - Délka animace
animation-timing-function - Způsob (a rychlost) animace
animation-delay - Doba před spuštěním animace

animation: animace 3s linear 0s infinite;

Článek pro vás napsal Jan Lupčík

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

Nejčastěji vyhledáváné

animation-iteration-count - Český CSS 3 manuál

Hodnoty

Ukázka