Vytvořte css animaci. Stav prvku před a po animaci se přehrává v režimu animace. Přehrávání animace animace-přehrát-stav

Nedávno jsme viděli, že přechody jsou jednoduše způsob, jak animovat vlastnosti stylu originál na finále stav.

Takže přechody v CSS jsou konkrétní typ animace, kde:

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

Ale co když chcete:

• mít kontrolu nad přechodnými stavy?
• opakovat animaci?
• vytvářet různé typy animací jedenživel?
• oživit určitou vlastnost jen napůl?
• simulovat různé časové funkce pro různé vlastnosti?

Animace v CSS vám toto vše a ještě více umožňuje.

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 zkratkou pro několik dalších:

• název-animace: název animace;
• animation-duration : jak dlouho trvá animace;
• animace-časování-funkce: jak se počítají mezistavy;
• animation-delay : animace se spustí po nějaké době;
• animation-itration-count : kolikrát se má 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 poskakující animaci:

@keyframes bouncing( 0 % ( bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); ) 100 % ( bottom: 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í obojího; )

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

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

• název-animace: poskakování (stejné jako název klíčového snímku)
• délka animace: 0,5 s (půl sekundy)
• Funkce časování animace: cubic-bezier(0.1, 0.25, 0.1,1)
• zpoždění animace: 0 s (bez zpoždění)
• počet animací: nekonečno (hraje se donekonečna)
• směr animace: alternativní (jde tam a zpět)
• animační-vyplňovací režim: obojí

@klíčové snímky

Než budete moci použít animaci na prvky HTML, musíte animaci napsat pomocí klíčových snímků. Obecně jsou klíčové snímky každým mezikrokem animace. 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 tolik klíčových snímků, kolik chcete, například 33 %, 4 % nebo dokonce 29,86 %. V praxi napíšete jen některé z nich.

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

Chcete-li definovat animaci, jednoduše napište klíčové slovo @keyframes s jejím názvem:

@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 je zajištěno, že se animace dokonale zacyklí. 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 donekonečna.

název-animace

Název animace je použit minimálně dvakrát:

• při psaní animací pomocí @keframes ;
• při použití animace pomocí vlastnosti animation-name (nebo vlastnosti animation shorthand).

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

Podobně jako názvy tříd CSS může název animace obsahovat pouze:

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

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

délka animace

Stejně jako trvání přechodu lze délku animace nastavit v sekundách (1 s) nebo milisekundách (200 ms).

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

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

funkce animace-časování

Stejně jako funkce časování přechodu mohou funkce časování animace používat klíčová slova jako lineární, náběh nebo mohou být definovány pomocí libovolných Bezierových křivek.

Selektor (funkce animace-časování: náběh a výstup; )

Výchozí hodnota: snadnost.

Vzhledem k tomu, že animace v CSS používá klíčové snímky, můžete nastavit funkci lineárního času a simulovat konkrétní Bezierovu křivku definováním mnoho velmi specifických klíčové rámečky. Podívejte se na Bounce.js pro pokročilé animace.

animace-zpoždění

Stejně jako u přechodového zpoždění lze zpoždění animace nastavit v sekundách (1s) nebo milisekundách (200ms).

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

Užitečné při zahrnutí více animací do série.

A, .b, .c ( animace: poskaková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 animace přehraje pouze 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 donekonečna opakovat.

.selektor ( počet animací: nekonečno; ) směr animace

Vlastnost animation-direction určuje, zda 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řed začátek animace a po jeho dokončení.

Při definování klíčových snímků můžete určit pravidla CSS, která se použijí v různých krocích animace. Nyní tato pravidla CSS mohou srazit se s těmi, kteří již aplikováno na animované prvky.

animační-vyplňovací-mód umožňuje prohlížeči sdělit, zda animační styly by měl být použit i mimo animaci.

Představme si tlačítko, které je:

• ve výchozím nastavení červená;
• zmodrá na začátku animace;
• a nakonec zelené, když je animace dokončena.

Animace CSS3 dělá webové stránky dynamickými. Oživuje webové stránky a zlepšuje uživatelskou zkušenost. Na rozdíl od přechodů CSS3 je tvorba animací založena na klíčových snímcích, které umožňují automatické přehrávání a opakování efektů po danou dobu a také zastavení animace ve smyčce.

Animaci CSS3 lze použít pro téměř všechny html prvky, stejně jako pro pseudoprvky:before a:after. Seznam animovaných vlastností je uveden na stránce. Při vytváření animací nezapomeňte na možné problémy s výkonem, protože změna některých vlastností vyžaduje spoustu prostředků.

Úvod do CSS animace Podpora prohlížeče

IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: -
Prohlížeč Android: 44, 4.1 -webkit-
Chrome pro Android: 44

1. Pravidlo @keyframes

Vytvoření animace začíná nastavením klíčových snímků pravidla @keyframes. Snímky určují, které vlastnosti budou v kterém kroku animovány. Každý rámec může obsahovat jeden nebo více deklaračních bloků jednoho nebo více párů vlastností a hodnot. Pravidlo @keyframes obsahuje název animace prvku, který spojuje pravidlo a blok deklarace prvku.

@keyframes shadow ( od (text-shadow: 0 0 3px černá;) 50 % (text-shadow: 0 0 30px černá;) do (text-shadow: 0 0 3px černá;) )

Klíčové snímky se vytvářejí pomocí klíčových slov od a do (ekvivalentní hodnotám 0 % a 100 %) nebo pomocí procentních bodů, kterých lze zadat libovolný počet. Můžete také kombinovat klíčová slova a procentní body. Pokud mají rámce stejné vlastnosti a hodnoty, lze je sloučit do jedné deklarace:

@klíčové snímky se pohybují ( od, do ( nahoře: 0; vlevo: 0; ) 25 %, 75 % (nahoře: 100 %;) 50 % (nahoře: 50 %;) )

Pokud není zadáno 0 % nebo 100 % snímků, pak je prohlížeč uživatele vytvoří pomocí vypočítaných (původně nastavených) hodnot animované vlastnosti. Pokud mají dva klíčové snímky stejné selektory, následující zruší předchozí.

Jakmile je deklarováno pravidlo @keyframes, můžeme na něj odkazovat ve vlastnosti animace:

H1 (velikost písma: 3,5 em; barva: tmavě purpurová; animace: stín 2s nekonečný náběh; )

Nedoporučuje se animovat nečíselné hodnoty (až na vzácné výjimky), protože výsledek v prohlížeči může být nepředvídatelný. Také byste neměli vytvářet klíčové snímky pro hodnoty vlastností, které nemají střed, jako jsou hodnoty vlastností color: pink a color: #ffffff , width: auto a width: 100px nebo border-radius: 0 a border- poloměr: 50 % ( v tomto případě by bylo správné zadat border-radius: 0 %).

2. Název animace název-animace

Vlastnost určuje název animace. Název animace je vytvořen v pravidle @keyframes. Doporučuje se použít název, který odráží podstatu animace, a můžete použít jedno nebo více slov spojených mezerou – nebo znakem podtržítka _. Nemovitost se nedědí.

Syntax

Div (název animace: mymove;)

3. Délka animace trvání animace

Vlastnost nastavuje dobu trvání animace v sekundách nebo milisekundách, záporné hodnoty nejsou povoleny. Neděděno. Pokud máte pro prvek nastaveno více než jednu animaci, můžete pro každý nastavit jiný čas uvedením hodnot oddělených čárkami.

Syntax

Div (trvání animace: 2 s;)

4. Funkce časování animace-časování-funkce

Vlastnost definuje změnu rychlosti od začátku do konce animace pomocí funkcí časování. Určeno pomocí klíčových slov nebo Bezierovy křivky cubic-bezier(x1, y1, x2, y2) . Neděděno.

funkce animace-časování

Hodnoty:
snadnost	Výchozí funkce, animace začíná pomalu, rychle se zrychluje a na konci se zpomaluje. Odpovídá cubic-bezier(0,25,0,1,0,25,1) .
lineární	Animace probíhá rovnoměrně po celou dobu, bez kolísání rychlosti. Odpovídá cubic-bezier(0,0,1,1) .
zklidnění	Animace začíná pomalu a na konci se plynule zrychluje. Odpovídá cubic-bezier(0,42,0,1,1) .
uvolnění	Animace se rychle spustí a na konci plynule zpomalí. Odpovídá cubic-bezier(0,0,0,58,1) .
easy-in-out	Animace pomalu začíná a pomalu končí. Odpovídá cubic-bezier(0,42,0,0,58,1) .
cubic-bezier(x1, y1, x2, y2)	Umožňuje ručně nastavit hodnoty od 0 do 1. Můžete sestavit libovolnou trajektorii rychlosti změny animace.
krokový start	Nastaví animaci krok za krokem, rozdělí animaci na segmenty, změny nastanou na začátku každého kroku. Ekvivalent kroků (1, start) .
krokový konec	Animace krok za krokem, změny nastanou na konci každého kroku. Ekvivalent kroků (1, konec) .
kroky(počet kroků,začátek|konec)	Funkce času kroku, která přebírá dva parametry. Počet kroků je určen kladným celým číslem. Druhý parametr je volitelný, určuje okamžik, kdy animace začíná. S hodnotou start se animace spustí na začátku každého kroku a hodnota končí na konci každého kroku se zpožděním. Latence se vypočítá vydělením doby animace počtem kroků. Pokud není zadán druhý parametr, použije se výchozí hodnota end.
počáteční	Nastaví hodnotu vlastnosti na výchozí hodnotu.
zdědit	Zdědí hodnotu vlastnosti z nadřazeného prvku.

Syntax

Div (funkce animace-časování: lineární;)

Pomocí animace krok za krokem lze vytvořit zajímavé efekty, jako je tisk textu nebo indikátor načítání.

5. Animace se zpožděním animace-zpoždění

Vlastnost ignoruje animaci po určenou dobu, což umožňuje spustit každou animaci samostatně. Negativní zpoždění spustí animaci od určitého bodu v jejím cyklu, tzn. od doby uvedené v prodlení. To vám umožňuje aplikovat animaci na více fázově posunutých prvků změnou pouze doby zpoždění.

Aby animace začala od středu, musíte nastavit záporné zpoždění rovnající se polovině času nastaveného v animaci-duration . Neděděno.

Syntax

Div (zpoždění animace: 2 s;)

6. Opakujte animaci animace-počet iterací

Tato vlastnost umožňuje spustit animaci několikrát. Hodnota 0 nebo jakékoli záporné číslo odstraní animaci z přehrávání. Neděděno.

Syntax

Div (počet-animací: 3;)

7. Animace-režie

Vlastnost určuje směr, ve kterém se animace opakuje. Pokud se animace opakuje pouze jednou, pak tato vlastnost nemá žádný význam. Neděděno.

Syntax

Div (směr animace: alternativní;)

8. Krátký záznam animace

Všechny parametry přehrávání animace lze sloučit do jedné vlastnosti - animation , přičemž jsou uvedeny oddělené mezerou:

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

Pro přehrání animace stačí zadat pouze dvě vlastnosti - animation-name a animation-duration , zbývající vlastnosti budou mít výchozí hodnoty. Na pořadí, ve kterém jsou vlastnosti uvedeny, nezáleží, jediné je, že doba provedení animace-duration musí nastat před zpožděním animace.

9. Přehrávání animace animation-play-state

Vlastnost řídí přehrávání a zastavení animace. Zastavení animace ve smyčce je možné pomocí této vlastnosti ve skriptu JavaScript. Animaci můžete také zastavit, když najedete myší na objekt - state:hover . Neděděno.

Syntax

Div:hover (animace-play-stav: pozastaveno;)

10. Stav prvku před a po přehrání animace animace-výplň-mód

Tato vlastnost určuje pořadí, ve kterém jsou styly definované v @keyframes aplikovány na objekt. Neděděno.

režim animace

Hodnoty:
žádný	Výchozí hodnota. Stav prvku se nezmění před ani po přehrání animace.
vpřed	Jakmile animace skončí (určeno hodnotou počtu iterací animace), animace použije hodnoty vlastností v době, kdy animace skončí. Pokud je počet animací větší než nula, použijí se hodnoty pro konec poslední dokončené iterace animace (nikoli hodnota pro začátek iterace, která následuje). Pokud je počet animací nula, použijí se hodnoty, které začínají první iteraci (stejně jako v režimu vyplnění animace: zpět;).
zpět	Během období definovaného pomocí animation-delay bude animace používat hodnoty vlastností definované v klíčovém snímku, což zahájí první iteraci animace. Jsou to buď hodnoty od klíčového snímku (když animace-směr: normální nebo animace-směr: alternativní) nebo hodnoty klíčového snímku (když animace-směr: obrácená nebo animace-směr: alternativní).

Ahoj všichni. Nedávno jsem narazil na sérii velmi užitečných a zajímavých video tutoriálů na téma „CSS animace“. Ale je to smůla, všechna videa byla v angličtině a pravděpodobně ne každý návrhář rozvržení umí anglicky na dostatečné úrovni, aby porozuměl a asimiloval všechny potřebné informace. Proto jsem se rozhodl pro vás tyto lekce přeložit (nebo spíše udělat bezplatný překlad). Není třeba děkovat. Tak:

CSS animace. Úvod + vlastnost přechodu (tento článek)

CSS animace. Klíčové snímky – již brzy

Kdy a proč používat CSS animace? - již brzy

Co je to CSS animace?

Než vám řeknu, jak dělat CSS animace a proč jsou vůbec potřeba, rád bych vám nejprve vysvětlil, co je to CSS animace, uvedu definici nebo tak něco.

Animace na webu mají dvě hlavní myšlenky. První nápad je přivést něco k životu. Jste jako Dr. Frankenstein. Máte neživé monstrum a vdechujete mu život. Druhým je vizualizace pohybu. A klíčové slovo je zde „pohyb“.

Jak animovat?

CSS má dva hlavní nástroje, pomocí kterých můžeme přesouvat prvky po webové stránce. První (o které si povíme později) je vlastnost přechodu. Za prvé, právě s jeho pomocí vytváříme animace v CSS. Druhým nástrojem je vlastnost animace spárovaná s klíčovými snímky (@keyframes). Na tento nástroj se podíváme podrobněji v další lekci, ale právě teď se podíváme na vlastnost přechodu CSS. A pak si povíme, co by mělo být na stránce animované (když to uživatel potřebuje) a co by se animovat nemělo (když animace vypadá hloupě a nevhodně), na základě uživatelské zkušenosti (UX).

Vlastnost přechodu CSS - syntaxe parametrů a hodnot

Nejprve se podívejme, jak se tato vlastnost čte a porozumíme její syntaxi. Tuto vlastnost zapíšeme asi takto:

přechod: [ vlastnictví] [trvání] [funkce časování] [zpoždění] ;

přechod : výška 1s uvolnění 0,2s ;

Tuto vlastnost přiřadíme prvku, který chceme animovat. Tento prvek je hladký přechod(nebo postupně) mezi několika jeho stavy (například výška 100 pixelů a výška 200 pixelů). A jak bude vypadat tento přechod(z angl. transition), bude záviset na parametrech, které mu dáme.

První parametr (hodnota) vlastnosti přechodu je další vlastnictví prvek, který má být animován (např. výška).

Druhým parametrem je trvání (trvání) animace, tedy jak dlouho bude trvat přechod prvku z jednoho stavu do druhého (například 2s nebo 2000ms).

Třetím parametrem je funkce časování[funkce časování] (funkce náběhu [funkce náběhu]). Jak bude intenzita animace rozložena po celou dobu. Například animace může začít náhle, ale na konci se zpomalí a přechod plynule ukončí. Lze použít jako klíčová slova (např. snadnostsnadnost-v-ven,lineární) a funkce Bezierovy kostky (např. krychlový-bezier(0,17; 0,67; 0,83; 0,67)). Bezierovu kostku můžete snadno a pohodlně přizpůsobit na tomto zdroji http://cubic-bezier.com, stejně jako funkci kroků, abyste vytvořili animaci snímek po snímku (krok za krokem).

A nakonec parametr zpoždění. Zpoždění animace je doba, po kterou musíte čekat, než se animace (v našem případě přechod) spustí.

Příklad animace přechodu CSS

Podívejme se na tento příklad animace CSS:

přechod: neprůhlednost 300 ms náběh a výstup 1 s;

Zde animujeme pouze vlastnost neprůhlednost(neprůhlednost). To znamená, že pokud má prvek, který budeme animovat, další vlastnosti, jako je výška, šířka nebo barva, a i když se tyto vlastnosti liší v různých stavech prvku, pak pouze vlastnost opacity bude mít plynulý přechod (animaci). Rozumíte?

Místo konkrétní vlastnosti můžete také použít klíčové slovo „all“. To znamená, že animujeme naprosto všechny vlastnosti prvku, které byly změněny v novém stavu prvku (nejen neprůhlednost), a které lze vůbec animovat. Protože, jak víte, ne všechny vlastnosti lze animovat. Ale o tom trochu později.

Druhý parametr ( 300 paní) nám říká, že animace bude trvat pouze 300 milisekund. To znamená, že prvek se rychle objeví nebo rychle rozpustí v závislosti na hodnotách vlastností v jeho dvou stavech.

Funkce časování ( snadnost-v-ven) s třetím parametrem bude začátek a konec animace hladší.

Zpoždění ( 1 s) ukazuje, jak pozdě musí být animace, než se spustí.

Obecně se jedná o vzorec, jak budeme zaznamenávat přechodovou animaci. Toto je syntaxe. V případě potřeby můžete pro jeden prvek přidat více než jeden přechod [vlastnost]. Můžete například animovat změny výšky a šířky prvku s různými parametry. Chcete-li to provést, ve vlastnosti přechodu místo středníku na konci vložte pouze čárku a napište parametry pro jinou vlastnost. A nezapomeňte na konec dát středník, aby to fungovalo.

Co můžete animovat v CSS?

Dosud jsme diskutovali pouze o syntaxi vlastnosti přechodu. Nyní si povíme něco o vlastnostech, které můžeme animovat a které ne. Protože jsou některé věci, které prostě nemá smysl animovat, a některé vlastnosti se prostě animovat nedají.

Animovatelné vlastnosti

Vezměte si například vlastnosti, jako jsou:

velikost písma;

barva pozadí;

šířka;

vlevo (jak daleko od levé strany lze prvek posunout [umístit]…

Je zřejmé, že má smysl tyto vlastnosti animovat. Pokud změníte jejich hodnoty, změní se vizuálně prvek. Pokud změníte velikost písma z řekněme 14 na 28 pixelů, uvidíte, že se písmo postupně zvětšuje a dochází k animaci, která nějakou dobu trvá. Animace má smysl vždy, pokud jsou hodnoty vlastností jasné (obvykle číselné) hodnoty. Pokud zvětšíte velikost písma na 100 pixelů, můžete jasně vidět, jak písmena rostou. Lze také pozorovat hladkou změnu barvy pozadí [protože barva na webu má číselný kód, například červená rgb(255,0,0)]. Tyto vlastnosti jsou animované.

Obecně si pamatujte, že pokud si představíte, že je animovaný, může být animovaný. Nejčastěji to funguje.

Neoživitelné vlastnosti

A zde je seznam vlastností, které nelze animovat (příklad):

zobrazit;

font-family;

pozice...

Toto jsou některé z nich, které jsem vzal jako příklad, abyste mohli pocítit rozdíl mezi animovatelnými a neanimovatelnými vlastnostmi CSS.

Vezměme displej. Dokážete si představit, jak vizuálně se mění mezi „ zobrazit:blok;" a " zobrazit:inline-blok;"? Jak se může vzhled prvku plynule měnit mezi " pozice:relativní;"A" pozice:absolutní;"? Ne, prvek bude samozřejmě vypadat jinak, pokud se tyto vlastnosti změní. Ale jak si to představit přechod? To nemůžeš. Právo? Nedovedete si představit, že byste z Helvetice udělali Gruzii, každé písmeno, to prostě nepůjde. Tato písma můžete změnit, ale změní se náhle a nedojde k žádné animaci.

Výkon animace v CSS

Obecně platí, že mnoho vlastností je animovaných, ale některé nikoli. Nyní se pojďme rozhodnout, které animovatelné vlastnosti jsou pro animaci lepší a které horší. Jde o výkon. Dotkli jsme se tématu výkonu, protože animace je proces náročný na zdroje.

Obecně platí, že pro animaci nejlépe fungují tyto věci:

Umístění na stránce

Měřítko

Otáčení

Průhlednost

Navíc první tři položky tohoto seznamu jsou všechny parametry vlastnosti transform (přeložit, změnit měřítko, otočit). Polohování probíhá podél os X a Y.

Pokud se rozhodnete animovat cokoli jiného, ​​riskujete, že nezískáte měkký, plynulý přechod 60 snímků za sekundu. Paul Lewis a Irové

A to je přesně to, co nás zajímá, když mluvíme o výkonu animace. Obecně jsou pro animaci nejvhodnější vlastnosti transformace a krytí. Při animaci čehokoli jiného může počet snímků za sekundu animace klesnout mnohem pod 60 snímků za sekundu.

Shrňme tento bod následovně. Snažte se vyhnout překreslování prvků na webové stránce a animaci prvků, které prohlížeč obtížně vykresluje (například stíny).

Jak udělat animaci v CSS?

Nyní pojďme zjistit, jak spustit animaci. Co je třeba udělat, aby se prvek začal animovat. Jinými slovy, jak udělat animaci v CSS.

Není to těžké a existuje mnoho různých způsobů, jak to udělat. Existují však 2 hlavní, které musíte bezpodmínečně zvládnout. První metodou je animace při najetí myší na prvek (pseudotřída: hover). Najedete myší na prvek a spustí se animace. Tímto způsobem můžete animovat samotný prvek nebo kterýkoli z jeho podřízených prvků. Pak vám ukážu, jak to funguje. Druhým způsobem je změna třídy prvků. To znamená, že máte běžný prvek, změníte (nebo přidáte) jeho třídu do třídy, která má úplně jiné styly. Pokud přidáte třídu, dojde k animaci, a pokud třídu odeberete, dojde k opačné animaci. Je to dobrý způsob, jak animovat nabídky nebo rozevírací seznamy.

Doslov

Pokryli jsme vše, co potřebujeme k vytváření animací pomocí čistého CSS. Velmi brzy se podíváme na praktické příklady a o něco později na velmi zajímavé příklady.

Dočetli jste až do konce?

Byl tento článek užitečný?

Vlastně ne

Co přesně se vám nelíbilo? Byl článek neúplný nebo nepravdivý?
Napište do komentářů a slibujeme, že se zlepšíme!

Mnoho návštěvníků má otázku, jak používat knihovnu Animate.css v praxi. Ve skutečnosti se vše děje docela jednoduše, stačí jednou projít všemi fázemi a poté analogicky zopakovat některé akce.

1. Nejprve si musíte stáhnout a připojit knihovnu. Jsou tři možnosti.

• Plná verze. Obsahuje více než tři tisíce řádků kódu o objemu cca 60 kB. Dobře se hodí v první fázi seznamování se s animací obecně, protože vám umožní podívat se, jak to celé funguje.
• Balená verze (obfuskovaná, v odborných termínech). V souboru css nejsou žádné tabulátory, mezery ani zalomení řádků. Díky tomu se velikost souboru zmenší jedenapůlkrát, ale je obtížné přečíst kód.
• Selektivní efekty. Nejlépe se hodí pro většinu úkolů, protože vám umožňuje určit pouze efekty, které se vám líbí, a eliminovat ty zbytečné.

2. Chcete-li na požadovaný prvek aplikovat efekt animace, přidejte k němu dvě třídy - animovaný a třídu s názvem efektu, například fadeInDown (viz seznam všech efektů a jejich názvy). Řekněme například, že chcete přidat blikání ke všem obrázkům na stránce. V HTML píšeme následující:

Pokud web používá jQuery, přidávání tříd je zjednodušené a provádí se pomocí JavaScriptu.

$(document).ready(function() ( $("img").addClass("animovaný blesk"); ))

3. Samotná animace se automaticky zapne při načtení stránky. To je užitečné pro vyskakovací zprávy určené k upoutání pozornosti uživatele (příklad 1).

Příklad 1: Pop-up zpráva

Varování .warning ( pozadí: #fc0; odsazení: 10px; ohraničení: 1px plné #000; ) Číslo zenitu v hodině odhaduje rovníkový sextant!

Aby efekt fungoval, když najedete kurzorem myši na prvek, budete muset použít JavaScript. Jako příklad si vezměte obrázky, které se pohybují, když na ně najedete kurzorem myši. Přejít na značku přidejte animovanou třídu a připojte jQuery (příklad 2).

Příklad 2. Galerie

Galerie $(document).ready(function() ( $("img.animated").hover(function() ( $(this).addClass("bounce"); // Přidání třídy bounce), function() ( $(this).removeClass("bounce"); // Odebrání třídy ))))

V tomto příkladu, když najedete na obrázek s animovanou třídou, přidá se další třída odrazu; pokud je kurzor odstraněn, je odstraněna i třída bounce.

4. Nakonec si můžete animaci upravit podle svých představ změnou rychlosti animace a také nastavením doby zpoždění pomocí CSS. Oba jsou volitelné a lze je v případě potřeby použít.

Animované ( -webkit-animation-duration: .6s; -o-animation-duration: .6s; -moz-animation-duration: .6s; animation-duration: .6s; -webkit-animation-delay: 1s; -o -zpoždění-animace: 1s; -moz-zpoždění-animace: 1s;

Všechny moderní prohlížeče, kromě IE9, podporují přechody CSS a animace CSS, které umožňují implementovat animaci pomocí CSS bez použití JavaScriptu. Animace se vztahuje na všechny prvky html a také na pseudoprvky :before a :after

Podpora prohlížeče

IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: -
Prohlížeč Android: 44, 4.1 -webkit-
Chrome pro Android: 44

Chcete-li ve svém projektu použít animaci, stačí udělat dvě věci:

Vytvořte samotnou animaci pomocí klíčového slova @keyframes

Připojte jej k prvku, který je třeba animovat, a zadejte potřebné vlastnosti.

pravidlo @keyframes

Pravidlo @keyframes umožňuje vytvářet animaci pomocí klíčových snímků – stavů objektu v určitém okamžiku.

Klíčové snímky animace se vytvářejí pomocí klíčových slov od a do (ekvivalent 0 % a 100 %) nebo pomocí procentních bodů, kterých lze nastavit kolik chcete. Můžete také kombinovat klíčová slova a procentní body.

Pokud není zadán počáteční (od , 0 %) nebo konec (do , 100 %) snímek, prohlížeč nastaví jejich vypočtené hodnoty vlastností animace na hodnoty, jaké by byly, kdyby nebyla použita žádná animace.

Pokud mají dva klíčové snímky stejné selektory, následující zruší předchozí.

Při definování animace musí za vlastnost @keyframes bezprostředně následovat název animace (tento název je pak nutné zadat ve vlastnosti animace prvku, který bude animován).

@keyframes move ( from ( transform: translateX(0px); ) 50 % ( transform: translateX(130px); ) 100 % ( transform: translateX(0px); ) )

@klíčové snímky se pohybují ( od ( 50% { 100% { transform: translateX(0px);

Vytvořili jsme animaci, která funguje takto:

Začátek animace (od by se dalo napsat 0%) - pozice prvku podél osy X je 0px;

Uprostřed animace (50 %) – pozice prvku podél osy X je 130 pixelů;

Konec animace (použili jsme 100%) - vrátíme prvek na začátek animace, tzn. poloha na ose X prvku je 0px;

Zde a níže jsem pro usnadnění napsal v příkladech několik řádků JavaScriptu, které budou střídavě přidávat nebo odebírat třídu s animací na prvku, takže pro přehrání animace stačí kliknout na tento prvek.

Klíčové snímky lze seskupit:

@keyframes move ( from ( transform: translateX(0px); ) 25%, 50% ( transform: translateX(130px); ) 100% ( transform: translateX(0px); ) )

@klíčové snímky se pohybují ( od ( transform: translateX(0px); 25%, 50% { transform: translateX(130px); 100% { transform: translateX(0px);

K jednomu prvku můžete přiřadit několik animací, jejich názvy a parametry musí být zapsány v pořadí přiřazení:

prvek ( název-animace: animace-1, animace-2; trvání-animace: 2 s, 4 s; )

živel( název-animace : animace-1, animace-2 ; délka animace : 2s, 4s ;

Připojení animace k prvku se provádí pomocí dvou příkazů: animation-name a animation-duration .

Název animace

Vlastnost animation-name určuje název animace. Doporučuje se použít název, který odráží podstatu animace, a můžete použít jedno nebo několik slov spojených dohromady pomocí mezery - nebo podtržítka _.

animace-name: move;

Funkce času

Vlastnost animation-timing-function umožňuje nastavit speciální funkci zodpovědnou za rychlost přehrávání animace. Upozorňujeme, že rychlost přehrávání animace je nejčastěji nelineární, tzn. jeho okamžitá rychlost v různých oblastech se bude lišit. V současné době existuje několik vestavěných argumentů pro toto pravidlo: lehkost , náběh , náběh , náběh , lineární , krokový začátek , konec konec .

Takové funkce si však můžete vytvořit sami. Speciální funkce cubic-bezier(P1x, P1y, P2x, P2y);

vezme čtyři argumenty a během procesu animace na nich vytvoří křivku rozdělení hodnot. Na tomto webu si můžete procvičit vytváření vlastních funkcí a podívat se, jak fungují.

• Nakonec lze animaci převést na sadu diskrétních hodnot pomocí funkce kroků (počet kroků, směr), jejichž argumenty jsou počet jejích kroků a směr, který může nabývat hodnot start nebo konec.
• lehkost je výchozí funkce, animace začíná pomalu, rychle se zrychluje a na konci se zpomaluje. Odpovídá cubic-bezier(0,25,0,1,0,25,1).
• lineární — animace probíhá rovnoměrně po celou dobu, bez kolísání rychlosti; odpovídá cubic-bezier(0,0,1,1).
• easy-in - animace začíná pomalu a na konci se plynule zrychluje; odpovídá cubic-bezier(0,42,0,1,1).
• easy-out - animace se rychle spustí a na konci se plynule zpomalí; odpovídá cubic-bezier(0,0,0,58,1).
• easy-in-out - animace začíná pomalu a pomalu končí; odpovídá cubic-bezier(0,42,0,0,58,1).
• cubic-bezier(x1, y1, x2, y2) - viz výše.

inherit - zdědí tuto vlastnost z rodičovského prvku.

Vizuální srovnání

Vlastnost animation-delay definuje prodlevu, než se animace začne přehrávat, nastavenou v sekundách nebo milisekundách. Negativní zpoždění spustí animaci od určitého bodu v jejím cyklu, tzn. od doby uvedené v prodlení. To vám umožňuje aplikovat animaci na více fázově posunutých prvků změnou pouze doby zpoždění. Pokud chcete, aby animace začala od středu, nastavte záporné zpoždění rovnající se polovině času nastaveného v animaci-duration . Neděděno.

prvek ( název-animace: animace-1; trvání animace: 2 s; zpoždění animace: 10 s; // 10 sekund uplyne, než se tato animace spustí)

Opakujte animaci

Vlastnost animation-itation-count umožňuje spustit animaci vícekrát. Neděděno. Hodnotu nastavíme na libovolnou kladnou hodnotu 1, 2, 3... atd. nebo nekonečné pro nekonečné opakování. Hodnota 0 nebo jakékoli záporné číslo odstraní animaci z přehrávání.