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-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:

  1. Tento atribut
  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-iteration-count - Počet opakování animace
animation: barvy 3s normal 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