@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; }
}
Komentáře
Zatím nikdo nevložil komentář - buď první!