Lekce 7 - Úvod do animací elementů pomocí CSS3

V předchozím kvízu, Kvíz - Pozadí, posuvníky a kurzory v CSS3, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

Vítejte u první lekce ohledně animací v CSS3, ve které si ukážeme, jak rozpohybovat jednotlivé elementy na stránce.

Co se v této lekci naučíme vytvořit?

Animace v CSS

Pokud chceme, aby se na stránce nějaký element pohnul, musíme mu přidat vlastnost animation. Tato vlastnost je zkratka pro celou řadu jednotlivých vlastností:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

Ty už se však běžně nepoužívají a píše se pouze zkrácená podoba animation. V CSS může vlastnost vypadat například takto:

.animace {
 animation: colors 5s infinite;
}

V této třídě je definována vlastnost animation, která následně obsahuje atributy move, což je název animace, 5s délku trvání animace a infinite, což definuje jakým způsobem se má animace provést.

Při definování animace se musí vždy napsat délka jejího trvání, jinak bude automaticky nastavena na 0 a nikdy se neprovede! Délku trvání animace uvidíme v s nebo ms.

Název, který se píše uvnitř animation, v našem případě colors, odkazuje na námi definovaný pohyb (více níže) nebo změny jednotlivých elementů.

@keyframes

Aby prohlížeč poznal, jaké elementy má změnit, nastavujeme mu pravidla @keyframes. Ty mohou vypadat například takto:

@keyframes colors {
 0% {background-color: red;}
 50% {background-color: blue;}
 100% {background-color: green;}
}

V uvedeném příkladě máme tedy pravidlo @keyframes a jeho název colors, který potom použijeme ve vlastnosti animation. Uvnitř tohoto pravidla jsou definovány změny barev pozadí pro námi vybraný element. Jednotlivá procenta před změnou barvy udávají, kdy v námi určeném čase trvání animace má změna nastat. Pokud tedy naše animace má trvat 5 sekund, na začátku bude barva červená, během prvních dvou a půl sekundy se změní na modrou, a v dalších dvou a půl sekundách se z modré změní na zelenou. Vyzkoušíme si to naživo pomocí jednoduchého odstavce <p>:

Bílá barva textu byla přidána pro lepší čitelnost.

Protože máme nastaveno také nekonečné opakování této animace (infinite), budou se barvy měnit pořád dokola. Přechody mezi barvami červená-modrá, modrá-zelená probíhají postupně, zatím co přechod ze zelené zpět na červenou je skokový. Hezky je to vidět, pokud bychom měli nastavené trvání animace minimálně na 10 sekund a více:

Pokud bychom chtěli, aby na konci barva neskočila, musíme tedy pro 100% {background-color: } nastavit stejnou barvu jako jsme měli na začátku.

Keyframes pro změnu velikosti a pohyb elementů

Místo procent uvnitř @keyframes můžeme použít také náhradu klíčových slov from a to. Ty se používají nejčastěji, pokud se jedná o jednoduchý pohyb. Zde máme například změnu velikosti elementu:

.animace2 {
 animation: pulz 3s infinite;
}

@keyframes pulz {
 from {transform: scale(1);}
 to {transform: scale(2);}
}

Takto se změní během 3 sekund velikost elementu ve všech jeho směrech na dvojnásobek. Potom se opět ihned zmenší a pořád dokola:

Pro demonstraci změny velikosti elementu bylo přidáno červené pozadí pro element.

Procenta nebo text uvnitř @keyframes můžeme i kombinovat:

.animace3 {
 animation: pohyb 10s infinite;
}

@keyframes pohyb {
 from {margin-left: 0px;}
 50% {margin-left: 80px;}
 to {margin-left: 100px;}
}

V této animaci se tedy během prvních pěti sekund posune element doprava o 80px a poté během dalších pěti sekund ještě o 20px. Pomocí procent je zde tedy ovlivněna rychlost posunu v určitém čase:

Pokud chceme, aby se animace v průběhu zastavila, ale nepřerušila, definujeme pro dvě různá procenta průběhu stejnou hodnotu:

.animace4 {
 animation: pohyb2 6s infinite;
}

@keyframes pohyb2 {
 0% {margin-left: 0px;}
 25%, 75% {margin-left: 50px;}
 100% {margin-left: 100px;}
}

Element se zde tedy posune o 50px, potom chvíli zůstane na místě a nakonec se posune ještě o dalších 50px:

Co když pro dvě stejná procenta průběhu definuji dva různé požadavky?

Pokud jsou to různé požadavky, rozhodně to nevadí, provedou se oba dva. Pokud jsou to stejné požadavky, například:

@keyframes priklad {
 0% {margin-left: 0px;}
 50% {margin-left: 500px;}
 50% {margin-left: 70px; margin-top: 10px;}
 100% {margin-left: 100px;}
}

Prohlížeč pracuje podle pravidel CSS a provede poslední zadefinovanou hodnotu, v tomto příkladu tedy margin-left: 70px; a margin-top: 10px;:

!important v keyframes

Uvnitř @keyframes pravidel můžeme napsat i "hodnotu" !important, což z logiky programování znamená "opak důležitého". Část pravidla, která je takto označena je sice napsána v kódu, ale v animaci se poté neprovede!

@keyframes priklad-important {
 0% {margin-left: 0px;}
 50% {margin-left: 90px !important;}
 100% {margin-left: 100px;}
}

Pro prohlížeč tento zápis znamená jednoduše, posuň element o 100px doprava, a to bez přestávek nebo zpomalení:

V poslední řadě je potřeba si uvědomit, že všechny verze prohlížečů nemusí podporovat animace nebo jejich zadání tak, jak se obvykle píše. Jediný, kdo s nimi má trochu potíže, je naštěstí Internet Explorer. Všechny ostatní prohlížeče na nejnovějších verzích animace podporují. Na internetu je pro to vytvořeno spoustu pomocných tabulek

Pokud není něco jasné, všechny zobrazené ukázky si můžete stáhnout níže

V další lekci, Animace zobrazování textu pomocí CSS3, si ukážeme, jak za pomocí animací v CSS upravit efekty zobrazování textu.