animation-name - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti animation-name nastavujeme jméno animace. Pro použití je potřebná základní znalost @keyframes.

Hodnoty

none (výchozí) - Animace neproběhne (hodnota může být použita k zastavení animace pomocí CSS).
keyframeNazev - Vlastní název definovaného @keyframes.

Ukázka

Vytvořme si jednoduchý div představující kruh o velikosti 100px × 100px, který bude měnit barvy (z červené na černou a poté zpět na červenou). Animaci plnící tento účel si můžeme pojmenovat barvy.

<!DOCTYPE html>
<html>
        <head>
                <style>
                div
                {
                        width: 100px;
                        height: 100px;
                        border-radius: 50%;
                        animation-name: barvy;
                        animation-duration: 3s;
                        animation-iteration-count: infinite;
                }
                @keyframes barvy
                {
                        0%, 100% { background-color: red; }
                        50% { background-color: black; }
                }
                </style>
        <title>animation-name</title>
        </head>
        <body>
                <div></div>
        </body>
</html>

Výsledek:

Vlastnost animation-name v CSS 3 - Ostatní CSS vlastnosti

Tento zápis je však dlouhý. Naštěstí se dá zkrátit. Aby však animace fungovala stejně jako předtím, musíme definovat tyto atributy:

Tento atribut
animation-duration - Délka animace
animation-timing-function - Způsob (a rychlost) animace
animation-delay - Doba před spuštěním animace
animation-iteration-count - Počet opakování animace

animation: barvy 3s normal 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-name - Český CSS 3 manuál

Hodnoty

Ukázka