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