Čím blíže jsme k rozhraní, které začíná fungovat, tím je pro uživatele srozumitelnější. V životě se téměř nic neděje okamžitě - při otevření plechovky sody nebo zavření očí před spaním pozorujeme spoustu přechodných stavů, a ne ostré „otevřeno/zavřeno“, jak se to děje na webu.

Ve svém článku se podělím o své poznatky o CSS animaci a o tom, jak s ní pracovat. Animace dodává webům dynamiku a zlepšuje porozumění jejich schopnostem. Oživuje webové stránky a pomáhá při interakci s uživateli. Na rozdíl od přechodů CSS3 jsou animace CSS založeny na klíčových snímcích. Což vám umožní přehrávat a opakovat efekty po určenou dobu a také automaticky zastavit animaci ve smyčce.

Animace je sada klíčových snímků nebo klíčových snímků uložených v CSS:

@keyframes animation-test ( 0 % ( šířka: 100px; ) 100 % (šířka: 200px; ) )

Podívejme se, co se tady děje. Klíčové slovo @keyframes označuje samotnou animaci. Poté následuje název animace, v našem případě animace-test. Složené závorky obsahují seznam klíčových snímků. Používáme počáteční rámec 0 % a koncový rámec 100 % (lze je zapsat i jako od a do).
Podívejte se na kód níže. Animaci lze nastavit také takto:

@keyframes animation-test ( from ( width: 0; ) 25 % ( width: 75px; ) 75 % ( width: 150px; ) do ( width: 100 %; ) )

Pamatujte, že pokud není zadán počáteční nebo koncový snímek, prohlížeč je automaticky detekuje, jako by na ně nebyla aplikována žádná animace.

Animaci můžete připojit k prvku, jako je tento:

Selektor prvku ( název-animace: název-vaše-animace; trvání-animace: 2,5 s; )

Vlastnost animation-name určuje název animace @keyframes. Pravidlo trvání animace určuje dobu trvání animace v sekundách (1 s, 30 s, 0,5 s) nebo milisekundách (600 ms, 2 500 ms).

Můžete také seskupit klíčové snímky:

@keyframes animation-test ( 0 %, 35 % ( šířka: 50 px; ) 75 % ( šířka: 200 px; ) 100 % ( šířka: 100 %; ) )

Na jeden prvek (selektor) můžete použít několik animací. Jejich názvy a parametry by měly být zapsány v pořadí aplikace:

Selektor prvku ( název-animace: název-anim-1, název-anim-2; trvání-animace: 1 s, 3 s; )

Zpoždění animace:

Vlastnost animation-delay určuje zpoždění před přehráním animace v sekundách nebo milisekundách:

Selektor prvku ( název-animace: název-anim-1; trvání-animace: 3 s; zpoždění animace: 2 s; /* Než se animace spustí, uplynou 2 sekundy */ )

Přehrát animaci:

Pomocí animation-itation-count můžeme určit, kolikrát se bude animace opakovat: 0, 1, 2, 3 atd. Nebo nekonečno pro opakování:

Selektor prvku ( název-animace: název-anim-1; trvání-animace: 3 s; zpoždění-animace: 4 s; počet-iterací animace: 5; /* animace se přehraje 5krát */ )

Stav prvku před a po animaci:

Pomocí vlastnosti animation-fill-mode je možné určit, v jakém stavu bude prvek před začátkem animace a po jejím skončení:

animační-vyplňovací režim: vpřed;- prvek animace bude po dokončení/přehrání v posledním stavu klíčového snímku;

A nimation-fill-mode: zpět;- prvek bude ve stavu prvního klíčového snímku;

animační-vyplňovací režim: obojí; - před spuštěním animace bude prvek ve stavu prvního klíčového snímku, po dokončení - ve stavu posledního.

Spuštění a zastavení animace:

Za to odpovídá vlastnost animation-play-state, která může nabývat dvou hodnot: spuštěné nebo pozastavené.

Element-selector:hover (animace-play-state: pozastaveno; )

Režie animace:

Vlastnost animation-direction určuje, jak ovládat směr, kterým se animace přehrává. Zde jsou možné hodnoty:

směr animace: normální; - animace se přehrává v přímém pořadí;

animace-směr: reverzní; - animace se přehrává v opačném pořadí, od do do od;

animace-směr: střídat;- sudá opakování animace se přehrávají v obráceném pořadí, lichá - v dopředném pořadí;

animace-směr: střídavě-zpětně; - lichá opakování animace se přehrávají v obráceném pořadí, sudá - v dopředném pořadí.

Funkce plynulého výstupu animovaných snímků:

Vlastnost animation-timing-function umožňuje nastavit speciální funkci zodpovědnou za rychlost přehrávání animace. Ve výchozím nastavení se animace spustí pomalu, rychle se zrychlí a na konci se zpomalí. Aktuálně máme následující předdefinované hodnoty: lineární, lehkost, náběh, náběh, náběh, náběh, náběh, konec.

Takové funkce si však můžete vytvořit sami. Význam Funkce časování animace: cubic-bezier (P1x, P1y, P2x, P2y); vezme 4 argumenty jako vstup a vytvoří distribuční křivku pro proces animace.

Na webu si můžete tvorbu těchto funkcí podrobněji prostudovat nebo vyzkoušet http://cubic-bezier.com

Nakonec lze animaci rozložit na sadu jednotlivých hodnot (kroků) pomocí funkce kroků, která bere jako vstup počet kroků a směr (začátek nebo konec). V níže uvedeném příkladu se animace skládá z 5 kroků, z nichž poslední proběhne těsně před koncem animace:

Selektor prvku ( název-animace: název-anim-1; trvání-animace: 3 s; zpoždění-animace: 5 s; počet-iterací animace: 3; funkce časování animace: kroky(5, konec); )

Podpora prohlížeče pro animaci:

Hodnoty v tabulce označují první verzi prohlížeče, která tuto vlastnost plně podporuje.

Hodnoty s -webkit-, -moz- nebo -O- označují první verzi, která pracovala s předponou.

Na webu https://www.w3schools.com Animaci CSS si můžete prostudovat podrobněji (s příklady).
Jednou z oblíbených knihoven pro práci s animacemi je animovat.css.

Může se zdát, že potíže, na které narazíte při práci s animacemi CSS, nejsou opodstatněné. To ale absolutně není pravda.

Za prvé, CSS je mocný nástroj pro zlepšení uživatelské zkušenosti s rozhraním. Nemá to velký vliv na produktivitu uživatele. Na rozdíl od analogů JavaScriptu. Technologie prostřednictvím použití výpočetní výkon GPU umožňuje prohlížečům rychle optimalizovat rychlost vykreslování prvků.

Za druhé, flexibilita, rychlost a snadnost implementace animací CSS pomůže „vdechnout život“ stávajícím nebo novým rozhraním. Po vyvinutí obecných a originálních přístupů a pochopení specifik této technologie můžete vytvořit jedinečná uživatelská rozhraní pro téměř všechny projekty.

Doufám, že jste v článku našli užitečné informace pro mě. Krásné stránky všem. Nezapomeňte na animace :)

POZORNOST! Vzhledem k tomu, že v této lekci budeme analyzovat animaci, nebudu vám moci ukázat příklad její práce na obrázcích, takže si klidně otevřete editor kódu a napište tam kód uvedený v tomto článku.

Základy tvorby

Nejprve tedy musíte začít s tím, jak jej vytvořit. Pravděpodobně jste zvyklí na to, že jakákoli věc v CSS je implementována přiřazením potřebných vlastností s příslušnými hodnotami požadovanému selektoru. Takže při vytváření animace to nestačí. Diagram vypadá takto:

Samotné přechodové efekty jsou vytvářeny pomocí @keyframes

Požadovanému prvku je dána stejná animace, stejně jako jeho parametry (to vše pomocí vlastností a jejich hodnot).

Nejprve si tedy musíme popsat potřebné změny v @keyframes, pojďme se blíže podívat na to, jak s nimi pracovat.

@keyframes syntaxe

Vlastně pro mě bude jednodušší vám vše vysvětlit na hotovém příkladu, byť velmi jednoduchém. Tady to je (kód je přidán do souboru css):

@keyframes pulse( 0%(font-size: 50px;) 50%(font-size: 60px;)) 100%(font-size: 50px;))

@keyframes pulse ( 0 % (velikost písma: 50px;) 50 % (velikost písma: 60px;))

Za klíčovým slovem @keyframes je tedy libovolné slovo, které bude fungovat jako název animace. V našem případě je to „puls“. Dále otevřete složené závorky, ve kterých jsou napsána nezbytná pravidla.

Procenta jsou tzv. časová razítka, ve kterých budou k prvku přidány zadané vlastnosti. V našem případě to, co je napsáno, znamená následující: na samém začátku provádění bude velikost písma 50 pixelů, uprostřed se zvětší na 60 a na konci se opět zmenší na počáteční velikost.

Klíčová slova from a to mohou nahradit položku v procentech, označují 0 % a 100 %, tedy začátek a konec přehrávání.

Uvedení animace do akce

Zatím máme jen kód, který generuje efekt animace, ale nikde se nepoužívá. Pokud obnovíte svou webovou stránku, nic se nezmění. Chcete-li použít animaci, musíte provést dva kroky:

Vyberte prvek, pro který bude použit

Propojte jej s pravidly popsanými přes @keyframes (přes název) a také nastavte další nastavení Pokud je potřeba.

Zkusme to

Ve svém html souboru jsem vytvořil blok s třídou shadow, který obsahuje jednoduchý řádek textu. Naším cílem je aplikovat na to animační efekty, které jsme popsali dříve textový prvek.

Aby vše fungovalo, je třeba v tomto případě zadat dvě požadované vlastnosti. Za prvé, toto je jméno, které jsme napsali do klíčových snímků. Za druhé je to doba trvání animace, protože bez tohoto parametru ji prohlížeč prostě nepřehraje.

Takže kromě stylů, které již náš blok má, přidáváme nové:

název-animace: pulse; délka animace: 2s;

Vše se tedy zopakuje 4x a poté se zastaví. Jak víte, místo čtyř můžete zadat libovolné číslo.

Nekonečná animace v css3

Velmi snadno se implementuje pomocí stejné vlastnosti. Ve skutečnosti stačí nastavit počet opakování na několik tisíc, to bude stačit, ale teoreticky se naše animace nebude opakovat donekonečna.

animace-iterace-počet: nekonečno;

animace - iterace - počet : nekonečno ;

To je vše, teď jsme udělali nekonečné opakování. Nedoporučuji kontrolovat, zda je to pravda poté, co celý život sedíte za monitorem. To se jednoduše používá v případech, kdy chcete, aby se efekt neustále opakoval a nezmizel. Pokud je to nenápadné a nerozptyluje uživatele, tak proč ne.

Zpoždění před startem

Ve výchozím nastavení se přehrávání spustí po úplném načtení stránky. Toto chování lze ovládat pomocí vlastnosti animation-delay. Jeho hodnota je uvedena v sekundách.

Směr

Další zajímavou vlastností je animace-direction. Standardně je nastaveno na normální, pokud jej nastavíte na reverzní, pak se všechny popsané snímky provedou v opačném směru. Podívejme se, jaký je rozdíl. Abych to udělal, trochu jsem změnil efekt přidáním dalšího rámečku.

@keyframes pulse( 0%(font-size: 50px;) 50%(font-size: 60px;) 70%(font-size: 80px;) 100%(font-size: 50px;))

@keyframes pulse ( 0 % (velikost písma: 50px;) 50 % (velikost písma: 60px;) 70 % (velikost písma: 80px;) 100 % (velikost písma: 50px;))

Při normálním směru se tedy v první polovině animace velikost písma zvětší na 60 pixelů, poté se opět prudce zvětší na 80, poté se vrátí do původní polohy.

Rýže. 2. Původní velikost textu

Rýže. 3. Velikost písma je téměř na konci animace, než se náhle vrátí do původního stavu.

Nyní se ptáme:

animace-směr: reverzní;

animace - směr : zpět ;

Všechno se obrátilo vzhůru nohama. Nejprve se text zvětší o celých 30 pixelů až na 80 a po zbytek animace se bude postupně zmenšovat, až se nakonec vrátí do své předchozí velikosti. Je to jednoduché.

Animační forma

A to je možná jedno z nejzajímavějších nastavení, se kterým můžete dlouho experimentovat. Ve výchozím nastavení se všechny změny provádějí stejnou rychlostí. Tento typ animace se nazývá lineární a kromě něj existují další.

Zdravím vás, přátelé! Dnes se podíváme na velmi zajímavé téma – vytváření CSS animací na reálném příkladu. Vyvrcholením tohoto tutoriálu bude vytvoření krásné CSS animace loga Million Dollar.

Chladný

Koktat

Materiály pro lekce

• Zdroje: Stáhnout
• Základní příklad z lekce: https://codepen.io/agragregra/pen/PKNavm
• Počáteční šablona z lekce: https://github.com/agragregra/optimizedhtml-start-template

Trochu teorie

Než začnete vytvářet animovaný příklad, měli byste si projít základy CSS animace, zvážit základní pojmy, vlastnosti a pravidla Tvorba CSS animace.

Pokud jste již měli zkušenosti s vytvářením animací v jakékoli aplikaci, jako je Adobe After Effects nebo starý Flash Professional (nyní Adobe Animate), pak byste měli být obeznámeni s pojmy jako „Klíčové snímky“, „Dočasné funkce nebo dynamika pohybu“, které se stejně jako v jakékoli jiné oblasti animace vztahují na animaci prvků na stránce pomocí CSS. Na rozdíl od práce s aplikačním rozhraním však své animace CSS vytváříte psaním kódu v editoru.

CSS pravidlo @keyframes

Vytvoření animace CSS začíná deklarováním názvu animace v bloku @klíčové snímky a definování takzvaných animačních kroků nebo klíčových snímků.

Pro zopakování teorie a základů použijeme čisté CSS a později na složitějším příkladu použijeme preprocesor Sass. Více o Sassovi se dozvíte v lekci. Navíc pro hlubší pochopení základů CSS doporučuji přečíst si také lekce „Základy CSS – průvodce pro nejmenší“ a „Všechny selektory CSS v jedné lekci“

Podívejme se na strukturu @keyframes a práci s klíčovými snímky jednoduchý příklad:

@keyframes otáčení ( 0 % ( okraj-poloměr: 0 0 0 0; transformace: rotace (0 stupnů); ) 25 % ( okraj-poloměr: 50 % 0 0 0; transformace: rotace (45 stupňů); ) 50 % ( border- poloměr: 50 % 50 % 0 0; transformace: otočení (90 stupňů); ) 75 % ( poloměr okraje: 50 % 50 % 50 % 0; transformace: otočení (135 stupňů); ) 100 % ( poloměr okraje: 50 % 50 % 50 % 50 %; transformace: otočení (180 stupňů); ) )

V prvním řádku vidíme, že po klíčové slovo@keyframes se jmenuje „turning“. Toto je název bloku rámců, na který se budeme dále odvolávat.

Po deklaraci se otevře složená závorka (v v tomto příkladu na čisté CSS), ve kterém se vlastnosti zapisují postupně od 0 % do 100 % pro každý klíčový snímek. Vezměte prosím na vědomí, že mezi 0 % a 100 % můžete vložit libovolný počet mezihodnot, ať už je to 50 %, 75 % nebo dokonce 83 %. To je velmi podobné časové ose animační aplikace, kde můžete mezi dva stavy přidat libovolný mezistav.

Dále lze tento blok kódu s klíčovými snímky aplikovat na libovolný CSS selektor, ale nejčastěji jsou připraveny pro konkrétní selektor, pokud chceme dosáhnout určitého chování z požadovaného bloku.

Přístup k bloku klíčových snímků

Poté, co jsme nastavili klíčové snímky pro objekt (v reálném životě se to děje paralelně nebo dokonce po přístupu k bloku pomocí klíčových snímků), můžeme přistupovat k našemu nově vytvořenému bloku. Podívejme se na následující jednoduchý kód z výše uvedeného příkladu:

Div ( šířka: 120px; výška: 120px; barva pozadí: fialová; okraj: 100px; animace: otočení 2s náběh 1s nekonečné střídání; )

Nic zvláštního až do posledního řádku. Zde určíme, jak bude objekt zpočátku vypadat a v posledním řádku bloku odkazujeme na blok klíčových snímků nazvaný „otočení“:

Animace: otáčení 2s zmírnění 1s nekonečné střídání;

Pokud je s definicí klíčových snímků vše relativně jasné, pak tento řádek potřebuje okamžité vysvětlení. Jak vidíme, první přijde Vlastnost CSS"animace". Toto je zkrácená forma, jako je vlastnost „margin: 20px 30px 40px 50px”, kterou lze rozdělit do několika samostatných vlastností:

Touto analogií lze složenou vlastnost „animace“ rozdělit na několik samostatných vlastností:

název-animace	Název animace, ke které se přistupuje z @keyframes
délka animace	Trvání neboli jak dlouho trvá provádění animace CSS. Lze zadat v sekundách (s) nebo milisekundách (ms)
funkce animace-časování	Časová funkce, dynamika pohybu objektu nebo změny vlastností ( ulehčit- (ve výchozím nastavení) animace začíná pomalu, zrychluje se a pomalu končí; lineární- animace probíhá rovnoměrně; zklidnění- začíná pomalu a zrychluje směrem k poslednímu klíčovému snímku; uvolnění- rychle se rozjíždí a na konci plynule zpomaluje; easy-in-out- pomalu začíná a pomalu končí)
animace-zpoždění	Doba zpoždění animace PŘED spuštěním. Uvádí se také v sekundách nebo milisekundách
animace-iterace-počet	Počet opakování (iterací) animace ( nekonečný- nekonečno, nebo můžete zadat jednoduché číslo bez jednotek)
animace-režie	Směr animace, sekvenční, zpětný nebo tam a zpět ( normální- (ve výchozím nastavení) animace se přehrává od začátku do konce a zastaví se; střídat- hraje od začátku do konce a v opačném směru; střídavě-zpětně- hraje od konce do začátku a zpět; zvrátit- animace se přehraje od konce.)
animace-přehrát-stav	Ovládání přehrávání animace ( pozastaveno(pauza), běh(spuštění) atd.). V případě potřeby lze použít on:hover nebo z funkce JS
režim animace	Stav prvku před a po přehrání animace. Například hodnota dozadu umožňuje vrátit všechny vlastnosti do původního stavu ihned po použití animace

Nejčastěji zkušení vývojáři nepíší všechny tyto vlastnosti samostatně, ale používají krátký zápis a jeho struktura je následující:

animace: (1. animace-název - název) (2. animace-trvání - trvání) (3. animace-časování-funkce dynamika pohybu) (4.animace-zpoždění - pauza před startem) (5.animace-iterace- počet - počet provedení) (6. animace-směr - směr)

Animace: název animace 2s lineární 1s nekonečně zpět

Z příkladu vidíme, že vstoupíme do bloku @keyframes animationname, nastavíme dobu trvání animace na 2 sekundy, dynamika je lineární, pauza před spuštěním je 1 sekunda, animace se donekonečna opakuje a provádí se v opačném směru.

Jak jsem řekl dříve, krátký zápis začíná vlastností " animace“, za nimiž následují hodnoty, jejichž pořadí je lepší nezapomenout, aby při psaní CSS animace nedošlo k záměně.

Většinu těchto vlastností však lze vynechat, protože jejich výchozí hodnoty většinou zcela uspokojí většinu úkolů při vytváření animací. Některé z nich nemusí být zapsány, ale zbytek by měl být uveden v pořadí, o kterém jsme hovořili dříve. Obecně platí, že k tomu, aby vaše animace fungovala, potřebujete ve složené vlastnosti pouze dva parametry – název ( název-animace) a trvání ( délka animace).

Animace CSS3 je poměrně široce používaná. Je na čase, aby i ti nejzačátečníci tvůrci webových stránek pochopili, co je to animace CSS a jak ji vytvořit. Možná si myslíte, že animace CSS3 je o pohybu bloků a vypadá to jako karikatura. Animace CSS ale není jen o přesunu prvku z jednoho bodu do druhého, ale také o zkreslení a dalších transformacích. Aby to bylo jasné i začátečníkům, sepsal jsem vše krok za krokem.

1. Základní vlastnosti CSS3 animace

Malý teoretický blok, ze kterého pochopíte, které vlastnosti CSS3 jsou zodpovědné za animaci a jaké hodnoty mohou nabývat.

• název-animace— jedinečný název animace (klíčové snímky, o nich budeme hovořit níže).
• délka animace— trvání animace v sekundách.
• funkce animace-časování— křivka změny rychlosti animace. Na první pohled je to velmi nejasné. Vždy je jednodušší ukázat na příkladu, který uvidíte níže. Může nabývat následujících hodnot: lineární | snadnost | uvolnění | uvolnění | cubic-bezier(n,n,n,n) .
• animace-zpoždění— zpoždění v sekundách před spuštěním animace.
• animace-iterace-počet— počet opakování animace. Lze jej zadat buď jednoduše jako číslo, nebo můžete zadat nekonečno a animace poběží donekonečna.

Zde jsou jen základní vlastnosti, které jsou více než dostatečné k vytvoření vaší první CSS3 animace.

Poslední věc, kterou potřebujeme znát a pochopit z teorie, je, jak vytvořit klíčové snímky. To je také snadné a provádí se pomocí pravidla @keyframes, ve kterém jsou specifikovány klíčové snímky. Syntaxe tohoto pravidla je následující:

Výše jsme nastavili první a poslední snímek. Všechny mezistavy budou vypočteny AUTOMATICKY!

2. Skutečný příklad animace CSS3

Teorie je jako obvykle nudná a ne vždy jasná. Je mnohem snazší vidět vše na skutečném příkladu, ale je nejlepší to udělat sami na nějaké testovací HTML stránce.

Když se učíte programovací jazyk, obvykle napíšete program „Hello, world!“, ze kterého pochopíte syntaxi tohoto jazyka a některé další základní věci. Ale nestudujeme programovací jazyk, ale popisný jazyk vzhled dokument. Proto budeme mít vlastní "Ahoj, světe!"

Zde je to, co uděláme například: ať máme nějaký blok