September discount week
Tento týden až 80% sleva na e-learning týkající se jazyka C
50 % bodů zdarma na online výuku díky naší Slevové akci!

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

V minulé lekci, Text a písmo 3. část, jsme pokračovali v problematice textu a písma. Dodělali jsme náš článek za pomocí dalších CSS vlastností.

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 elementů
localhost

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!

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;}
}
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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

Animace - Barvy
localhost

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:

Animace - Barvy 2
localhost

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:

Animace 2 - Pulz
localhost

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:

Animace 3 - Pohyb
localhost

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:

Animace 4 - Pohyb
localhost

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

Animace 5 - Různé požadavky
localhost

!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í:

Animace 6 - !important
localhost

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.


 

Stáhnout

Staženo 14x (922 B)

 

Předchozí článek
Text a písmo 3. část
Všechny články v sekci
CSS3
Článek pro vás napsal Filip Opluštil
Avatar
Jak se ti líbí článek?
1 hlasů
Aktivity (5)

 

 

Komentáře

Avatar
kozak.martin
Člen
Avatar
kozak.martin:12. září 15:44

Ahoj, celkem zajímavé vědět, že něco takového přes css funguje, ale mám pocit, že v dnešní době se to snad nikde na webech nevyužije ne? :-)

 
Odpovědět
12. září 15:44
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Filip Opluštil
Redaktor
Avatar
Odpovídá na kozak.martin
Filip Opluštil:12. září 16:50

V takovéto surové formě moc ne, ale je to takový základ, ze kterého potom vychází spoustu dalších prvků. Hodně to používají takové ty weby, kde je důležitý dojem, a funkcionalita je až vedlejší produkt, to znamená třeba stránky soukromých podnikatelů (květinářství, restaurace, posilovny atd.). :)

 
Odpovědět
12. září 16:50
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 2 zpráv z 2.