Animations (animace) - Český CSS3 manuál

HTML a CSS Manuál Ostatní vlastnosti Animations (animace) - Český CSS3 manuál

S CSS3 máme možnost vytvářet animace, které mohou nahradit například aminované obrázky, Flashové animace nebo JavaScript, které se používají na mnoha webech.

Pro ovládnutí animací je třeba si osvojit práci s @keyframes.

Příklad nastaení svého @keyframe:

@keyframes mujKeyframe
{
        from {background: red;}
        to {background: yellow;}
}

@-moz-keyframes mujKeyframe /* Firefox */
{
        from {background: red;}
        to {background: yellow;}
}

@-webkit-keyframes mujKeyframe /* Safari and Chrome */
{
        from {background: red;}
        to {background: yellow;}
}

@-o-keyframes mujKeyframe /* Opera */
{
        from {background: red;}
        to {background: yellow;}
}

Teď když jsme si vytvořili nastavení pro animaci si ukážeme jak jej použít:

div
{
        animation: myfirst 5s;
        -moz-animation: myfirst 5s; /* Firefox */
        -webkit-animation: myfirst 5s; /* Safari and Chrome */
        -o-animation: myfirst 5s; /* Opera */
}

Pokud dobu nezadáte bude použitá výchozí 0s a animace nebude mít žádný vliv.

Animace je vlastně efekt, který postupně mění styl elementu.

Můžeme si vybrat kolik změn chceme a kolikrát chceme.

Průběh můžeme nastavit rovněž v procentech přičemž použití klíčových slov from a to je to samé jako 0% a 100%

Pro správnou kompatibilitu s prohlížeči je vhodné vždy definovat začátek 0% a konec 100%

@keyframes myfirst
{
        0%   {background: red;}
        25%  {background: yellow;}
        50%  {background: blue;}
        100% {background: green;}
}

Ukázka změny více vlastností:

@keyframes myfirst
{
        0%   {background: red; left:0px; top:0px;}
        25%  {background: yellow; left:200px; top:0px;}
        50%  {background: blue; left:200px; top:200px;}
        75%  {background: green; left:0px; top:200px;}
        100% {background: red; left:0px; top:0px;}
}

Vlastnosti animace:

Opět můžeme definovat každou vlastnost zvlášť:

Název animace: animation-name: myfirst;

Délka průběhu: animation-duration: 5s;

Změna rychlosti průběhu: (nastavení stejné jako u přechodů (transitions)) animation-timing-function: linear;

Čekací doba na započetí animace: animation-delay: 2s;

Počet opakování: (celočíselná hodnota n nebo infinite - nekonečno) animation-iteration-count: infinite;

Směr animace: (normal nebo alternate (obrácený)) animation-direction: alternate;

Určuje zda animace běží nebo je zastavená (running, pause) animation-play-state: running;

A tohle všechno můžeme zase dát na jeden řádek

animation: myfirst 5s linear 2s infinite alternate;

 

 

  Aktivity (1)

Manuál pro vás napsal David Jančík [sczdavos]
Avatar
Autor je vášnivý programátor v .NET C# a PHP. Nezná slovo "nelze", nebojí se zkoušet nepoznané a pronikat do nových technologií.

Miniatura
Všechny články v sekci
Ostatní CSS vlastnosti

 

 

Komentáře

Avatar
krepsy3
Redaktor
Avatar
krepsy3:

jak nadefinuju, kterej @keyframe se přiřadí který animaci?)

Odpovědět 27. září 16:53
Programátor je stroj k převodu kávy na kód.
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.

Zobrazeno 1 zpráv z 1.