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;