@keyframes - Český CSS 3 manuál
Pomocí CSS 3 pravidla @keyframes nastavujeme jméno animace a v jeho obsahu chování animace.
Popis
Toto pravidlo se používá pouze pro animace. Vytváříme s ním vlastní animace, kdy definujeme za klíčovým slovem @keyframes název animace a v jeho těle chování. To můžeme nastavit pomocí slov (from a to) nebo procenty. Doporučují se ale používat procenta, které podporují prohlížeče lépe.
Při používání napíšeme pouze keyframe název.
Ukázka
Vytvořme si úplně jednoduchou animaci s názvem animace, která bude trvat 3 vteřiny a bude se neustále opakovat. Používat ji bude červený div, který se bude posouvat zleva doprava a zpět (použijeme k tomu procenta). Všimněte si hlavně použití a definování keyframe.
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; position: absolute; animation: animace 3s ease 0s infinite; } @keyframes animace { 0%, 100% { top: 50px; left: 100px; } 50% { top: 50px; left: 300px; } } </style> <title>@keyframes</title> </head> <body> <div></div> </body> </html>
Výsledek:
Více o animaci a její každé vlastnosti najdete v uvedeném odkazu výše.
Poznámka
Správně by se mělo pravidlo @keyframes psát bez prefixu a s prefixem -webkit- a -moz- pro podporu starších prohlížečů. Nové verze skoro všech prohlížečů podporují verzi bez prefixu. Pokud byste však chtěli mít animaci funkční i pro trochu starší prohlížeče, minulé definování keyframe by vypadalo takto:
@keyframes animace { 0%, 100% { top: 50px; left: 100px; } 50% { top: 50px; left: 300px; } } @-webkit-keyframes animace /* Chrome, Safari, Opera */ { 0%, 100% { top: 50px; left: 100px; } 50% { top: 50px; left: 300px; } } @-moz-keyframes animace /* Mozilla Firefox */ { 0%, 100% { top: 50px; left: 100px; } 50% { top: 50px; left: 300px; } }
