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

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

Pravidlo @keyframes v CSS 3 - Ostatní CSS vlastnosti

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

 

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