@keyframes - Český CSS 3 manuál

HTML a CSS Manuál Ostatní vlastnosti @keyframes - Český CSS 3 manuál

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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:

Pravidlo @keyframes v CSS 3

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; }
}

 

 

Manuál pro vás napsal IT Man
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikacích v PHP (speciálně ve frameworku Laravel). Je též jedním z vývojářů úspěšného komunitního módu TruckersMP.
Miniatura
Všechny články v sekci
Ostatní CSS vlastnosti
Aktivity (1)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!