7. diel - Úvod do animácií elementov pomocou CSS3

V minulej lekcii, Text a písmo 3. časť , sme pokračovali v problematike textu a písma. Dorobili sme náš článok za pomocou ďalších CSS vlastností.

Vitajte u prvej lekcie ohľadom animácií v CSS3, v ktorej si ukážeme, ako rozpohybovať jednotlivé elementy na stránke.

Čo sa v tejto lekcii naučíme vytvoriť?

Animácie v CSS

Ak chceme, aby sa na stránke nejaký element pohol, musíme mu pridať vlastnosť animation. Táto vlastnosť je skratka pre celý rad jednotlivých vlastností:

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

Tie už sa však bežne nepoužívajú a píše sa len skrátená podoba animation. V CSS môže vlastnosť vyzerať napríklad takto:

.animace {
 animation: colors 5s infinite;
}

V tejto triede je definovaná vlastnosť animation, ktorá následne obsahuje atribúty move, čo je názov animácie, 5s dĺžku trvania animácie a infinite, čo definuje akým spôsobom sa má animácia vykonať.

Pri definovaní animácie sa musí vždy napísať dĺžka jej trvania, inak bude automaticky nastavená na 0 a nikdy sa nevykoná!

Názov, ktorý sa píše vo vnútri animation, v našom prípade colors, odkazuje na nami definovaný pohyb (viac nižšie) alebo zmeny jednotlivých elementov.

@keyframes

Aby prehliadač spoznal, aké elementy má zmeniť, nastavujeme mu pravidlá @keyframes. Tie môžu vyzerať napríklad takto:

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

V uvedenom príklade máme teda pravidlo @keyframes a jeho názov colors, ktorý potom použijeme vo vlastnosti animation. Vnútri tohto pravidla sú definované zmeny farieb pozadia pre nami vybraný element. Jednotlivé percentá pred zmenou farby udávajú, kedy v nami určenom čase trvania animácie má zmena nastať. Ak teda naša animácia má trvať 5 sekúnd, na začiatku bude farba červená, počas prvých dvoch a pol sekundy sa zmení na modrú, a v ďalších dvoch a pol sekundách sa z modrej zmení na zelenú. Vyskúšame si to naživo pomocou jednoduchého odseku <p>:

Biela farba textu bola pridaná pre lepšiu čitateľnosť.

Pretože máme nastavené tiež nekonečné opakovanie tejto animácie (infinite), budú sa farby meniť stále dookola. Prechody medzi farbami červená - modrá, modrá - zelená prebiehajú postupne, zatiaľ čo prechod zo zelenej späť na červenú je skokový. Pekne je to vidieť, ak by sme mali nastavené trvanie animácie minimálne na 10 sekúnd a viac:

Ak by sme chceli, aby na konci farba neskočila, musíme teda pre 100% {background-color: } nastaviť rovnakú farbu ako sme mali na začiatku.

Keyframes pre zmenu veľkosti a pohyb elementov

Namiesto percent vnútri @keyframes môžeme použiť aj náhradu kľúčových slov from a to. Tie sa používajú najčastejšie, ak ide o jednoduchý pohyb. Tu máme napríklad zmenu veľkosti elementu:

.animace2 {
 animation: pulz 3s infinite;
}

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

Takto sa zmení počas 3 sekúnd veľkosť elementu vo všetkých jeho smeroch na dvojnásobok. Potom sa opäť ihneď zmenší a stále dookola:

Pre demonštráciu zmeny veľkosti elementu bolo pridané červené pozadie pre element.

Percentá alebo text vnútri @keyframes môžeme i kombinovať:

.animace3 {
 animation: pohyb 10s infinite;
}

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

V tejto animácii sa teda počas prvých piatich sekúnd posunie element doprava o 80px a potom v priebehu ďalších piatich sekúnd ešte o 20px. Pomocou percent je tu teda ovplyvnená rýchlosť posunu v určitom čase:

Ak chceme, aby sa animácie v priebehu zastavila, ale neprerušila, definujeme pre dve rôzne percentá priebehu rovnakú hodnotu:

.animace4 {
 animation: pohyb2 6s infinite;
}

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

Element sa tu teda posunie o 50px, potom chvíľu zostane na mieste a nakoniec sa posunie ešte o ďalších 50px:

Čo keď pre dve rovnaké percentá priebehu definujú dva rôzne požiadavky?

Ak sú to rôzne požiadavky, rozhodne to nevadí, vykonajú sa oba dva. Ak sú to rovnaké požiadavky, napríklad:

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

Prehliadač pracuje podľa pravidiel CSS a vykoná posledný zadefinovanie hodnotu, v tomto príklade teda margin-left: 70px; a margin-top: 10px;:

!important v keyframes

Vnútri @keyframes pravidiel môžeme napísať aj "hodnotu" !important, čo z logiky programovania znamená "opak dôležitého". Časť pravidlá, ktorá je takto označená je síce napísaná v kóde, ale v animácii následne neurobíte!

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

Pre prehliadač tento zápis znamená jednoducho, posuň element o 100px doprava, a to bez prestávok alebo spomalenia:

V poslednom rade je potrebné si uvedomiť, že všetky verzie prehliadačov nemusí podporovať animácie alebo ich zadanie tak, ako sa zvyčajne píše. Jediný, kto s nimi má trochu problémy, je našťastie Internet Explorer. Všetky ostatné prehliadače na najnovších verziách animácie podporujú. Na internete je pre to vytvorené veľa pomocných tabuliek

Pokiaľ nie je niečo jasné, všetky zobrazené ukážky si môžete stiahnuť nižšie:)

V budúcej lekcii, Text a písmo 5. časť , si ukážeme ako v CSS3 vykresľovať text zrkadlovo, ako pracovať so zalomením textu, medzerami a nastavením úvodzoviek.