CSS animace pro nejmenší. Příklady CSS animací a hotový kód Typy animací css

Nedávno jsme to viděli přechody je jen způsob animace vlastnosti stylu od originál před finále státy.

Takže přechody v CSS jsou charakteristický podle typu animace, kde:

existují pouze dva stavy: začátek a konec;
animace není ve smyčce;
mezistavy jsou řízeny pouze funkcí času.

Ale co když chcete:

mít kontrolu nad středně pokročilí státy?
smyčka animace?
vytvářet různé druhy animací jeden položka?
animovat konkrétní vlastnost pouze na polovina cesta?
napodobit různé časové funkce pro různé vlastnosti?

To vše a ještě více umožňuje animace v CSS.

Animace je jako mini-film, kde jako režisér dáváte pokyny (pravidla stylu) svým hercům (prvky HTML) pro různé scény (klíčové snímky).

Vlastnosti animace

Stejně jako přechod je vlastnost animace zkrácený pro pár dalších:

název-animace: název animace;
animace-trvání: jak dlouho trvá animace;
animační-časovací-funkce: jak se počítají mezistavy;
animation-delay: animace se spustí po nějaké době;
animation-itation-count: kolikrát by se měla animace spustit;
animace-směr: měl by pohyb jít opačným směrem nebo ne;
animation-fill-mode: jaké styly se použijí před zahájením animace a po jejím skončení.

Rychlý příklad

Chcete-li animovat tlačítko stahování, můžete napsat animaci poskakování:

@keyframes bouncing (0 % (dole: 0; box-shadow: 0 0 5px rgba (0,0,0,0,5);) 100 % (dole: 50px; box-shadow: 0 50px 50px rgba (0,0, 0,0,1);)) .loading-button (animace: poskakování 0,5s cubic-bezier (0,1,0,25,0,1,1) 0s nekonečné střídání obou;)

Nejprve musíte napsat skutečnou poskakující animaci pomocí @keyframes a pojmenovat ji.

Použil jsem zkrácený vlastnost animace a zahrnovala všechny možné možnosti:

animace-name: bouncing (odpovídá názvu klíčových snímků)
délka animace: 0,5 s (půl sekundy)
animace-časování-funkce: cubic-bezier (0.1, 0.25, 0.1,1)
zpoždění animace: 0 s (bez zpoždění)
počet animací: nekonečno (nekonečně opakovatelné)
směr animace: střídavě (jde tam a zpět)
animační-fill-mode: oba

@klíčové snímky

Před animací prvků HTML potřebujete psát animaci pomocí klíčových snímků... Obecně platí, že klíčové snímky jsou všichni mezikrok v animaci. Určují se pomocí procent:

0 % - první krok animace;
50 % je poloviční krok v animaci;
100% je poslední krok.

Můžete také použít klíčová slova od a do místo 0 % a 100 %.

Můžete definovat libovolný počet klíčových snímků, například 33 %, 4 % nebo dokonce 29,86 %. V praxi jich napíšete jen pár.

Každý klíčový snímek je CSS pravidlo, to znamená, že můžete psát vlastnosti CSS jako obvykle.

Chcete-li definovat animaci, stačí napsat klíčové slovo @keyframes s jeho titul:

@klíčové snímky kolem (0 % (vlevo: 0; nahoře: 0;) 25 % (vlevo: 240 pixelů; nahoře: 0;) 50 % (vlevo: 240 pixelů; nahoře: 140 pixelů;) 75 % (vlevo: 0; nahoře: 140 pixelů ;) 100 % (vlevo: 0; nahoře: 0;)) p (animace: přibližně 4 s lineárně nekonečno;)

Všimněte si, že začátek 0 % a konec 100 % obsahují stejná pravidla CSS. Tím zajistíte, že se animace bude perfektně opakovat. Protože je počítadlo iterací nastaveno na nekonečno, animace přejde z 0 % na 100 % a poté okamžitě zadní na 0 % a tak dále navždy.

název-animace

název animace se používá minimálně dvakrát:

na psaní animace s @keframes;
na použitím animace pomocí vlastnosti animation-name (nebo vlastnosti shorthand animation).

@keyframes cokoliv (/ * ... * /) .selector (název-animace: cokoliv;)

Stejně jako názvy tříd CSS mohou názvy animací obsahovat pouze:

písmena (a-z);
čísla (0-9);
podtržítko (_);
pomlčka (-).

Název nesmí začínat číslem ani dvěma pomlčkami.

délka animace

Stejně jako trvání přechodu lze nastavit trvání animace sekundy(1s) popř milisekundy(200 ms).

Selektor (trvání animace: 0,5 s;)

Výchozí hodnota je 0s, což znamená, že žádná animace není vůbec žádná.

funkce animace-časování

Podobně jako funkce časování pro přechody lze použít funkce časování pro animaci klíčová slova jako lineární, náběhový nebo lze definovat pomocí libovolného Bezierovy křivky.

Selektor (funkce animace-časování: snadnost-in-out;)

Výchozí nastavení je snadnost.

Vzhledem k tomu, že animace CSS používají klíčové snímky, můžete nastavit lineární funkce času a simulovat specifická Bezierova křivka definováním mnoho velmi specifických klíčové rámečky. Podívejte se na Bounce.js pro špičkové animace.

animace-zpoždění

Stejně jako u zpoždění přechodu lze nastavit zpoždění animace sekundy(1s) popř milisekundy(200 ms).

Výchozí hodnota je 0 s, což znamená, že nedochází k žádnému zpoždění.

Užitečné, když je zahrnuto více animací série.

A, .b, .c (animace: skákání 1 s;) .b (zpoždění animace: 0,25 s;) .c (zpoždění animace: 0,5 s;)

animace-iterace-počet

Ve výchozím nastavení se přehraje pouze animace jednou(hodnota 1). Můžete nastavit tři typy hodnot:

celá čísla, jako 2 nebo 3;
zlomková čísla jako 0,5, která přehrají pouze polovinu animace;
klíčové slovo infinite, které bude animaci opakovat donekonečna.

.selektor (počet-animací: nekonečno;)

animace-režie

Určuje vlastnost animation-direction v jakém pořadí jsou čteny klíčové snímky.

normální: začíná na 0 %, končí na 100 %, začíná znovu na 0 %.
zpětný chod: začíná na 100 %, končí na 0 %, začíná znovu na 100 %.
alternativní: začíná na 0 %, přejde na 100 %, vrátí se na 0 %.
alternativní-reverzní: začíná na 100 %, přejde na 0 %, vrátí se na 100 %.

To si lze snadněji představit, pokud je počet iterací animace nastaven na nekonečno.

režim animace

Vlastnost animation-fill-mode určuje, co se stane přední začátek animace a po jeho dokončení.

V rozhodování klíčová osoba můžete specifikovat Pravidla CSS které budou použity v různých krocích animace. Nyní tato pravidla CSS mohou kolidovat s těmi, kteří již aplikováno k animovaným prvkům.

animační-vyplňovací-mód umožňuje prohlížeči sdělit, zda animační styly taky by mělo platit mimo animaci.

Pojďme si to představit knoflík, který je:

Červené výchozí;
se stává modrý na začátku animace;
a na konci zelená když je animace hotová.

Poslední aktualizace: 06.11.2016

Animace poskytuje skvělé příležitosti pro změnu stylu prvku. Při přechodu máme sadu vlastností s počátečními hodnotami, které má prvek před začátkem přechodu, a konečnými hodnotami, které jsou nastaveny po dokončení přechodu. Zatímco během animace můžeme mít nejen dvě sady hodnot - počáteční a konečnou, ale také mnoho mezilehlých sad hodnot.

Animace spoléhá na sekvenční změnu klíčových snímků (klíčových snímků). Každý klíčový snímek definuje jednu sadu hodnot pro animované vlastnosti. A postupná změna takových klíčových snímků bude ve skutečnosti představovat animaci.

Ve skutečnosti přechody využívají stejný model – implicitně jsou definovány i dva klíčové snímky – začátek a konec a samotný přechod představuje přechod od počátečního ke koncovému klíčovému snímku. Jediný rozdíl oproti animaci je v tomto případě v tom, že pro animaci můžete definovat více mezilehlých klíčových snímků.

Obecně má deklarace klíčového snímku CSS3 následující podobu:

@keyframes název_animace (od (/ * počáteční hodnoty vlastností CSS * /) do (/ * konečné hodnoty vlastností CSS * /))

Za klíčovým slovem @keyframes následuje název animace. Poté jsou ve složených závorkách definovány alespoň dva klíčové snímky. Blok za klíčovým slovem from je deklarován jako počáteční klíčový snímek a za klíčovým slovem to v bloku je definován koncový klíčový snímek. V rámci každého klíčového snímku je definována jedna nebo více vlastností CSS, podobně jako se vytváří běžný styl.

Definujme například animaci pro barvu pozadí prvku:

Animace v CSS3

V tomto případě se animace nazývá backgroundColorAnimation. Animace může mít libovolný název.

Tato animace poskytuje přechod z červeného na modré pozadí. A po skončení animace se nastaví barva, která je definována pro prvek div.

Chcete-li k prvku připojit animaci, použije se v jeho stylu vlastnost animation-name. Hodnota této vlastnosti je název animace, která se má použít.

Také pomocí vlastnosti animation-duration musíte nastavit dobu animace v sekundách nebo milisekundách. V tomto případě je doba animace 2 sekundy.

S touto definicí se animace spustí ihned po načtení stránky. Můžete však také spouštět animace na základě akce uživatele. Například definováním stylu pro pseudotřídu: hover můžete definovat animaci, která se spustí, když najedete myší na prvek:

@keyframes backgroundColorAnimation (od (barva pozadí: červená;) do (barva pozadí: modrá;)) div (šířka: 100px; výška: 100px; okraj: 40px 30px; rám: 1px plný # 333; barva pozadí: # ccc;) div: hover (název-animace: backgroundColorAnimation; animation-duration: 2s;)

Mnoho klíčových snímků

Jak již bylo zmíněno výše, animace vám kromě dvou standardních klíčových snímků umožňuje používat mnoho středně pokročilých. Chcete-li definovat doplnění, použije se procento animace, ve které by se mělo doplnění použít:

@keyframes backgroundColorAnimation (od (barva pozadí: červená;) 25 % (barva pozadí: žlutá;) 50 % (barva pozadí: zelená;) 75 % (barva pozadí: modrá;) do (barva pozadí: fialová ;))

V tomto případě animace začíná červenou barvou. Po 25 % doby animace se barva změní na žlutou, po dalších 25 % na zelenou a tak dále.

Můžete také animovat několik vlastností v jednom klíčovém snímku najednou:

@keyframes backgroundColorAnimation (od (barva pozadí: červená; neprůhlednost: 0,2;) do (barva pozadí: modrá; neprůhlednost: 0,9;))

Můžete také definovat více samostatných animací, ale použít je společně:

@keyframes backgroundColorAnimation (od (barva pozadí: červená;) do (barva pozadí: modrá;)) @keyframes opacityAnimation (od (neprůhlednost: 0,2;) do (neprůhlednost: 0,9;)) div (šířka: 100px; výška: 100px; margin: 40px 30px; border: 1px solid # 333; background-color: #ccc; animation-name: backgroundColorAnimation, opacityAnimation; animation-duration: 2s, 3s;)

Animace jsou uvedeny jako hodnota vlastnosti animation-name, oddělené čárkami, a čas těchto animací je také nastaven odděleně čárkami ve vlastnosti animation-duration. Název animace a její čas se shodují s pozicí, to znamená, že animace opacityAnimation bude trvat 3 sekundy.

Dokončení animace

Obecně platí, že po skončení časového intervalu určeného vlastností animation-duration končí animace. Pomocí dalších vlastností však můžeme toto chování přepsat.

Například vlastnost animation-itation-count určuje, kolikrát se bude animace opakovat. Například 3 animace se opakují za sebou:

Počet iterací animací: 3;

Pokud chcete, aby se animace spouštěla nekonečně mnohokrát, pak je této vlastnosti přiřazena hodnota infinite:

Počet animací: nekonečno;

Když to zopakujete, animace začne znovu od počátečního klíčového snímku. Ale s animačním směrem: střídat; opačný směr animace při opakování. To znamená, že začne na konci klíčového snímku a poté dojde k přechodu na počáteční snímek:

Název-animace: backgroundColorAnimation, opacityAnimation; délka animace: 2s, 2s; animace-iterace-počet: 3; animace-směr: střídat;

Když animace skončí, prohlížeč nastaví styl animovaného prvku na styl, který by měl před aplikací animace. Ale vlastnost animation-fill-mode: forwards vám umožňuje nastavit konečnou hodnotu animované vlastnosti přesně tu, která byla v posledním snímku:

Název-animace: backgroundColorAnimation; délka animace: 2s; animace-iterace-počet: 3; animace-směr: střídat; animační-vyplňovací režim: vpřed;

Zpoždění animace

Pomocí vlastnosti animation-delay můžete definovat dobu zpoždění animace:

Název-animace: backgroundColorAnimation; délka animace: 5s; zpoždění animace: 1s; / * zpoždění 1 sekundy * /

Funkce plynulosti animace

Stejně jako u přechodů můžete na animace použít všechny stejné funkce náběhu/doběhu:

lineární: funkce lineární hladkosti, vlastnosti se mění rovnoměrně v průběhu času

easy: funkce náběhu/doběhu, která zrychluje animaci směrem ke středu a zpomaluje ke konci, čímž poskytuje přirozenější změnu

Easy-in: funkce easy-in, která zrychluje pouze na začátku

Easy-out: funkce easy-out, která zrychluje pouze na začátku

Easy-in-out: funkce náběhu, která zrychluje animaci směrem ke středu a zpomaluje ke konci, což poskytuje přirozenější změnu

cubic-bezier - Pro animaci použijte funkci krychlového Béziera

Vlastnost animation-timing-function se používá k nastavení funkce hladkosti:

@keyframes backgroundColorAnimation (od (color-background: red;) do (background-color: blue;)) div (šířka: 100px; výška: 100px; margin: 40px 30px; border: 1px solid # 333; animation-name: backgroundColorAnimation ; doba trvání animace: 3 s; funkce časování animace: snadné náběhu;)

Vlastnost animace

Vlastnost animace je zkrácený způsob, jak definovat výše uvedené vlastnosti:

Animace: animace-název animace-trvání animace-časování-funkce animace-iterace-počet animace-směr animace-zpoždění animace-režim vyplnění

První dva parametry, které poskytují název a načasování animace, jsou povinné. Zbývající hodnoty jsou volitelné.

Vezměme si následující sadu vlastností:

Název-animace: backgroundColorAnimation; délka animace: 5s; animace-časování-funkce: easy-in-out; animace-iterace-počet: 3; animace-směr: střídat; zpoždění animace: 1s; animační-vyplňovací režim: vpřed;

Tato sada bude ekvivalentní následující definici animace:

Animace: backgroundColorAnimation 5s náběh a výstup 3 alternativní 1s vpřed;

Vytvoření banneru s animací

Jako příklad s animací vytvoříme jednoduchý animovaný banner:

HTML banner

Současně probíhají tři animace. Animace "banner" mění barvu pozadí banneru, zatímco animace text1 a text2 zobrazují a skrývají text pomocí nastavení průhlednosti. Když je vidět první text, druhý není vidět a naopak. Dostaneme tak animaci textu v banneru.

CSS3 animace je široce používána. Je čas přijít na to, co je to animace CSS a jak ji vytvořit, i pro ty nejzačalejší tvůrce webových stránek. Možná si říkáte, že animace CSS3 je o pohybu bloků a vypadá to jako kreslený film. Ale animace CSS 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, popsal jsem vše v krocích.

1. Základní vlastnosti CSS3 animace

Malý teoretický blok, ze kterého pochopíte, které vlastnosti CSS3 jsou zodpovědné za animaci a také 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 rychlosti animace. Na první pohled je to velmi nepochopitelné. 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í | kubický-bezier (n, n, n, n).
animace-zpoždění- zpoždění v sekundách před začátkem animace.
animace-iterace-počet- počet opakování animace. Nastavuje se buď jednoduše číslem, nebo můžete zadat nekonečno a animace poběží neomezeně dlouho.

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 rozumět z teorie, je, jak vytvářet klíčové snímky. To je také snadné a provádí se pomocí pravidla @keyframes, uvnitř kterého jsou specifikovány klíčové snímky. Syntaxe tohoto pravidla je následující:

Nahoře nastavíme první a poslední snímek. Všechny mezistavy se počítají AUTOMATICKY!

2. Reálný příklad animace CSS3

Teorie je jako obvykle nudná a ne vždy jasná. Je mnohem snazší vidět vše na reálném příkladu a nejlépe si to udělat sami na nějaké testovací HTML stránce.

Když se učí programovací jazyk, většinou napíšou program "Ahoj, světe!" Ale nestudujeme programovací jazyk, ale jazyk pro popis vzhledu dokumentu. Proto budeme mít vlastní "Ahoj, světe!"

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

bude zpočátku mít šířku 800 pixelů a zmenší se na 100 pixelů za 5 sekund.

Zdá se, že vše je jasné – stačí blok zkomprimovat

a to je vše! Pojďme se podívat, jak to vypadá ve skutečnosti.

Nejprve označení HTML. Je to velmi jednoduché, protože pracujeme pouze s jedním prvkem na stránce.

1	<div class = "toSmallWidth">

A zde je to, co je v šabloně stylů:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth (margin: 20px auto; / * 20px horní a dolní odsazení a zarovnání na střed * / pozadí: červené; / * červené pozadí bloku * / výška: 100px; / * výška bloku 100px * /šířka: 800px; / * počáteční šířka 800px * /-webkit-animation-name: animWidthSitehere; -trvání-webkit-animation: 5s; / * vlastnost s předponou pro prohlížeče Chrome, Safari, Opera * / název-animace: animWidthSitehere; / * zadejte název klíčových snímků (umístěných níže) * / délka animace: 5s; / * nastavit dobu trvání animace * / } / * klíčové snímky s předponou pro prohlížeče Chrome, Safari, Opera * / @ -webkit-keyframes animWidthSitehere ( od (šířka: 800px;) do (šířka: 100px;)) @keyframes animWidthSitehere ( od (šířka: 800px;) / * první klíčový snímek, kde šířka bloku je 800 pixelů * / do (šířka: 100px;) / * poslední klíčový snímek, kde šířka bloku je 100 pixelů * / }

Jak můžete vidět, specifikovali jsme pouze první a poslední klíčový snímek a všechny mezilehlé byly „postaveny“ automaticky.

Vaše první animace CSS3 je připravena. Pro upevnění získaných znalostí vytvořte HTML dokument a CSS soubor a vložte tam (nebo lépe napište ručně) kód z příkladu. Pak jistě vše pochopíte. Poté zkuste totéž udělat s výškou bloku (měla by se snížit na výšku), abyste zajistili materiál.

3. Příklady animace CSS3 jsou složitější

Výše jste se dozvěděli, jak snadné je vytvářet animace CSS3. Pokud jste to zkusili udělat vlastníma rukama, už jste pochopili celý proces a nyní chcete vědět, jak můžete vytvořit složitější a krásnější animaci. A je opravdu možné ji vytvořit. Níže jsou uvedeny 3 lekce, kde je animace vytvořena stejným způsobem jako ve výše uvedeném příkladu.

Praxe vývoje webových zdrojů vedla ke dvěma významným trendům: rychlosti a vnímání kvality. První zavazuje vývojáře, aby svou práci dělal rychle, druhý - definuje hranice účelnosti.

Návštěvník při návštěvě stránek sleduje konkrétní cíl a řídí se obecně uznávanými představami o tom, kde se co nachází a jak by to mělo fungovat. Developer si může dělat svou práci, jak se mu to hodí, ale pokud má zájem upoutat pozornost většího počtu návštěvníků, pak je nevhodné jejich názor ignorovat.

Syntax a sémantika animace

Vlastnost animace CSS se snadno používá a umožňuje rychle vytvářet zajímavé efekty. Nemusíte být chytří a navrhovat si vlastní animace, aby se prvky webové stránky chovaly moderním způsobem, který návštěvník očekává. Vše funguje podle definice, podle očekávání a požadavků.

Tento příklad popisuje dva prvky. První je indikační proužek, který se pohybuje doprava a úměrně se zvětšuje. Druhým prvkem je obrázek, který se jednoduše posune doprava.

Nejsou zde zobrazeny všechny snímky. Nemovitost je v tomto případě realizována hladce. Návštěvník stránky pozoruje plynulý pohyb se zvětšením objemu řádku a pohybem obrázku. Použitím různých možností pohybu namísto typu náběhu a vysunutí lze pohyb ovládat. Možnost náběhu/doběhu poskytuje zrychlení na začátku a zpomalení na konci, ale můžete si vybrat jinou možnost pohybu.

Překrývání a interakce prvků

Všechny prvky, které mají vlastnost animace, jsou považovány CSS nezávisle na sobě a na celkovém toku stránky. Pokud se prvky na sebe naloží, získá se kombinace efektů a v důsledku toho nový efekt.

Pokud v procesu animace prvky změní své vlastnosti, pak díky zákonům překrývání barev můžete získat velmi originální efekty s pouhými dvěma nebo třemi prvky.

Velký význam má kresba prvku. V uvedeném příkladu je pruh vytvořen z obrázku, na kterém jsou dvě čáry různých barev. Když se velikost pásu zvětší, je to pila, když se pila pohybuje, je to pohybující se vlna. Manipulací s čarami a jejich sklonem můžete vytvářet efekty podle obecných zákonů grafiky.

Změna času animace také vede k nestandardním řešením. Použití vlastnosti transformace, jako je funkce rotace prvku, generuje původní změny. Příklad:

Zde pás plynule mění svůj vzhled z neprůhledného stavu na průhledný. V tomto případě spodní obrázek pouze změní svůj tvar.

Informace o animaci

V CSS: animace textu má zvláštní význam. Na textu vždy záleží a je přítomen na webové stránce za konkrétním účelem. Ale text je vždy méně informativní než obrázek a zabírá hodně místa.

Záruka, že správně napsaný text bude návštěvníkem adekvátně vnímán, je mnohem vyšší než naděje na správné pochopení obrázku, zvláště když má designér webu vlastní představu o formách vyjádření významu.

Pokud dříve, když animace CSS právě přišla do světa rozvržení, byly populární plíživé čáry, blikající hodiny, pulzující texty, v moderním vytváření stránek se to považuje za normální princip: aniž byste obtěžovali návštěvníka, prezentujte funkčnost webového zdroje tak efektivně jak je to možné.

V tomto kontextu je kterýkoli z výše uvedených příkladů vhodný pro reprezentaci textových informací, ale použití CSS jako 3D animace je nejpraktičtější.

Zde v „normálním“ stavu text zabírá málo místa. Můžete zvýraznit hlavní slovo nebo určit význam. Jakmile myš najede na textovou oblast, rozvine se z CSS 3D animace do normálního čitelného stavu.

Možnost úspory místa v kombinaci s 3D designem umožňuje kompaktní umístění informací. Uvolněný prostor lze využít pro jiné nebo související účely. S animací CSS budou informace, které potřebujete, dostupné ve správný čas.

Spotřebitelská animace

Znatelné úspěchy při vytváření vysoce kvalitních webových zdrojů stále opomíjejí jednu podivně položenou otázku: proč se vývojáři zabývají designem webu?

Stránka není uměleckým dílem a není výsledkem tvůrčího procesu pro estetické účely. Stránky jsou především funkcionalitou, která na ně dle názoru vlastníka (vývojáře) přivede nové návštěvníky a poskytne možnost pracovat s jejich klienty.

Prodejte výrobek, poskytněte službu, proveďte konkrétní práci... Návštěvník si přijde pro zboží, služby a práce. Design a animace jsou důležité, ale názor návštěvníka je stále důležitější než názor majitele (developera).

Pokud má v běžném obchodě zákazník vždy pravdu, tak proč by měl v internetovém obchodě dělat vše tak, jak vývojář prostřednictvím navržené možnosti designu přišel? Animace v kontextu CSS je skvělý nástroj, ale proč nezajít ještě o kousek dál: jako mnoho spotřebitelů, existuje tolik možností, jak vyjádřit funkčnost a design.

Varianta „spotřebitelské animace“ je, když existuje to, co navrhl vývojář a co si vybrali předchozí spotřebitelé a co si současný spotřebitel myslel.

Dobrý den, přátelé! Dnes se podíváme na zajímavé téma – vytváření CSS animací na reálném příkladu. Tento tutoriál vyvrcholí vytvořením krásné animace loga CSS za milion dolarů.

Třída

Zapin

Materiály pro lekce

Zdroje: Stáhnout
Základní příklad z tutoriálu: https://codepen.io/agragregra/pen/PKNavm
Startovací šablona z tutoriálu: 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, zvažte základní pojmy, vlastnosti a pravidla pro tvorbu CSS animací.

Pokud máte zkušenosti s vytvářením animací v jakékoli aplikaci, jako je Adobe After Effects nebo zastaralý Flash Professional (nyní Adobe Animate), měli byste být obeznámeni s pojmy, jako jsou klíčové snímky, funkce časování nebo dynamika pohybu. » v jakékoli jiné oblasti animace jsou použitelné pro 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 v budoucnu se složitějším příkladem propojíme použití preprocesoru Sass. Více o Sass se můžete dozvědět v tutoriálu. Navíc pro hlubší pochopení základů CSS také doporučuji přečíst si lekce „Základy CSS – Průvodce pro nejmenší“ a „Všechny selektory CSS v jedné lekci“

Podívejme se na strukturu @keyframes a klíčové snímky na jednoduchém příkladu:

@keyframes otáčení (0 % (poloměr okraje: 0 0 0 0; transformace: otočení (0 stupňů);) 25 % (poloměr okraje: 50 % 0 0 0; transformace: otočení (45 stupňů);) 50 % (hranice- 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 za klíčovým slovem @keyframes přichází jeho název „turning“. Toto je název bloku klíčových snímků, na který budeme odkazovat níže.

Po deklaraci se otevře složená závorka (v tomto příkladu v čistém CSS), ve které jsou vlastnosti pro každý klíčový snímek zapsány postupně od 0 % do 100 %. Všimněte si, ž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 tyto dva stavy přidat libovolný mezistav.

Dále lze tento blok kódu s klíčovými snímky aplikovat na jakýkoli 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.

Odkazuje na blok 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 s klíčovými snímky), můžeme přejít 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í;)

Do posledního řádku nic přepychového. Zde definujeme, jak bude objekt zpočátku vypadat a v posledním řádku bloku odkazujeme na blok klíčových snímků s názvem „turning“:

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, nejprve přichází vlastnost CSS „animation“. Toto je zkrácená forma zápisu, jako je vlastnost "margin: 20px 30px 40px 50px", kterou lze rozdělit do několika samostatných vlastností:

Analogicky lze vlastnost kompozitu animace rozdělit na několik samostatných vlastností:

název-animace	Název animace, na kterou odkazuje @keyframes
délka animace	Trvání nebo jak dlouho trvá provedení animace CSS. Lze nastavit v sekundách (s) nebo milisekundách (ms)
funkce animace-časování	Časová funkce, dynamika pohybu objektu nebo změny vlastností ( ulehčit- (výchozí) animace začíná pomalu, zrychluje se a pomalu končí; lineární- animace probíhá rovnoměrně; zklidnění- začíná pomalu a zrychluje na poslední klíčový snímek; uvolnění- začíná rychle a ke konci postupně 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. Nastavuje 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 nastavit prvočíslo bez jednotek)
animace-režie	Směr animace, sekvenční, reverzní nebo zpáteční cesta ( normální- (výchozí) animace se přehraje 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řehrává 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 na: najetí myší nebo z funkce JS
režim animace	Stav prvku před a po přehrání animace. Například hodnota pozpátku umožňuje vrátit všechny vlastnosti do původního stavu ihned po aplikaci 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 poprav) (6.animace-směr - směr)

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

Z příkladu vidíme, že odkazujeme na blok @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 běží v opačném směru.

Jak jsem řekl dříve, krátký zápis začíná „ animace“, Následují hodnoty, jejichž posloupnost je lepší nezapomenout, aby nedocházelo k záměně při psaní CSS animací.

Většinu těchto vlastností však lze vynechat, protože většinou jejich výchozí hodnoty budou vyhovovat většině potřeb animace. Některé z nich lze vynechat, ale zbytek by měl být uveden v pořadí, které jsme zvažovali dříve. Obecně, 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).