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

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 ; /*vnější okraje nahoře a dole po 20px a zarovnání uprostřed*/ pozadí:červená; /*červené pozadí bloku*/ výška: 100px; /*výška bloku 100px*/šířka: 800px; /*počáteční šířka 800px*/-webkit-animation-name : animWidthSitehere; -webkit-animation-duration : 5s; /* vlastnost s předponou pro prohlížeče Chrome, Safari, Opera */ název-animace: animWidthSitehere; /* uveďte 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 je šířka bloku 800px*/ do (šířka: 100px;) /*poslední klíčový snímek, kde šířka bloku je 100px*/ }

Jak vidíte, zadali jsme pouze první a poslední klíčový snímek a všechny přechodné snímky byly „sestaveny“ 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 ještě lépe napište ručně) kód z příkladu. Pak určitě všechno pochopíte. Poté zkuste totéž s výškou bloku (měla by se snížit na výšku), abyste zajistili materiál.

3. Složitější příklady animací CSS3

Výše jste se naučili, jak snadno vytvořit animaci CSS3. Pokud jste to zkusili udělat vlastníma rukama, už jste pochopili celý proces a nyní chcete zjistit, jak můžete vytvořit složitější a krásnější animaci. A skutečně je 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.

3 lekce o animaci CSS (transformace)

Lekce vám pomohou porozumět animaci CSS ještě lépe. Hlavní věc je pokusit se zopakovat to, co vidíte v lekcích. Nebo alespoň zkuste změnit hodnoty vlastností a uvidíte, co se stane, pak se budete méně bát CSS.

Na mnoha vstupních nebo propagačních stránkách stále častěji najdete různé animační efekty. Koneckonců dělají stránku zajímavější a atraktivnější.

V zásadě se tyto efekty nastavují buď na nějakou událost (kliknutí nebo najetí na prvek), nebo v okamžiku rolování stránky. Myslím, že jste na takové stránky narazili, při rolování stránky se plynule a krásně objevují různé prvky.

Dříve jste k implementaci těchto efektů museli používat pouze JS, ale vývoj nestojí a s vydáním CSS3 na něm lze implementovat všechny tyto efekty.

V této lekci vám představíme velmi zajímavý nástroj tzv animovat.css. Toto je hotová šablona stylů CSS, která má ve svém arzenálu přes 50 různých efektů a všechny tyto efekty jsou implementovány v CSS3.

Pro jeho použití stačí nastavit určitou třídu pro požadovaný prvek a na tento prvek bude aplikován efekt animace. Jak jsem řekl dříve, tato animace je implementována v CSS3, takže tyto efekty budou fungovat ve všech moderních prohlížečích.

Nyní se na to podíváme blíže animovat.css.

Základní HTML značení

Podívejte se na video tutoriál

• odskočit
• blikat
• puls
• gumička
• otřást
• houpačka
• viklat
• bounceIn
• bounceInDown
• bounceInLeft
• bounceInRight
• bounceInUp
• odrazit se
• bounceOutDown
• bounceOutLeft
• bounceOutRight
• bounceOutUp
• fadeIn
• fadeInDown
• fadeInDownBig
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightBig
• fadeInUp
• fadeInUpBig
• odeznít
• FadeOutDown
• fadeOutDownBig
• fadeOutLeft
• fadeOutLeftBig
• FadeOutRight
• fadeOutRightBig
• fadeOutUp
• fadeOutUpBig
• flipInX
• flipInY
• flipOutX
• FlipOuTY
• lightSpeedIn
• lightSpeedOut
• otočitIn
• otočit doleva dolu
• otáčet vpravo dolů
• otočitInUpLeft
• otočitVpravo
• otočitOut
• otočteOutDownLeft
• otočitOutDolůVpravo
• otočteOutUpLeft
• otáčetOutUpRight
• závěs
• rollIn
• zavést
• přiblížit
• zoomInDown
• zoomInLeft
• zoomInRight
• zoomInUp
• oddálit
• zoomOutDown
• zoomOutLeft
• zoomOutRight
• zoomOutUp
• slideInDown
• slideInLeft
• slideInRight
• slideInUp
• vysunout dolů
• slideOutLeft
• slideOutRight
• slideOutUp

Nekonečná animace

Pokud jste udělali vše, jak je popsáno výše, pak při načtení stránky bude tento efekt aplikován na prvek a je to, animace tam skončí.

Ale co když potřebujete, aby animace pokračovala bez zastavení?

Chcete-li to provést, přidejte další třídu pro náš animovaný prvek. Tohle je třída - nekonečný.

Nadpis

Nastavte animaci, když najedete myší na prvek

Podívejte se na video tutoriál

Všechny dříve popsané příklady nastavují animaci ihned po načtení stránky, ale v praxi je to málokdy potřeba. V praxi je velmi často nutné nastavit animaci při najetí na prvek, a proto níže uvádím již hotový kód pro tuto implementaci.

HTML

HTML Naše označení se trochu změnilo, nyní nemusíme specifikovat třídu, která je zodpovědná za konkrétní animaci. Tuto hodnotu musíme uvést ve speciálním atributu datový efekt. Věnujte tomu prosím pozornost, je to velmi důležité.

Nadpis

Zde je malý kód pro jQuery, který bude sledovat událost najetí kurzoru myši na prvek a pokud tato událost nastane, skript k němu přidá třídu, jejíž hodnota je uvedena v atributu datový efekt. Přidáním této třídy se použije animace.

Funkce animate(elem)( var effect = elem.data("efekt"); if(!efekt || elem.hasClass(efekt)) vrátí hodnotu false; elem.addClass(effect); setTimeout(function())( elem. removeClass (efekt), 1000 ) $(".animated").mouseenter(function() (animate($(this)); ));

Tento skript si samozřejmě můžete libovolně měnit, například v něm můžete změnit událost mouseenter na klikněte. Animace pak v tomto případě nenastane v okamžiku najetí myší na prvek, ale v okamžiku kliknutí.

Tvorba animace při rolování stránky

Podívejte se na video tutoriál

A nakonec se podívejme na další příklad, kde můžete snadno použít animovat.css.

Jmenovitě můžete nastavit různé efekty pro prvky při posouvání stránky. Pro tyto účely kromě animovat.css, potřebujeme také speciální skript wow.js.

Tato kolekce obsahuje ty nejlepší a nejkvalitnější CSS funkce. Zde můžete najít různé a úžasné ukázky a techniky od slavných designérů a designérů layoutů, kteří se snaží dokázat, že je nyní možné dělat téměř vše pouze pomocí čistého CSS. Najdete zde také několik lekcí, které vám podrobně řeknou, jak takové tvoření vytvořit. Doufám, že vám tato sbírka bude užitečná.

CSS 3D mraky

V této ukázce budete moci vytvářet a upravovat luxusní mraky ve 3D. Tyto CSS cloudy nám dávají jasně najevo, že možnosti webových technologií jsou téměř neomezené.

Čistá loga CSS

Toto jsou příklady log vytvořených pouze s čistým CSS. Jen se zamyslete, při jeho tvorbě nebyly použity žádné obrázky. Je to prostě něco.

Abeceda s animací CSS

Skvělý a umělecký příklad použití CSS v abecedě

3D navigace na webu

Jednoduchý, ale velmi stylový navigační panel pro web, samozřejmě vytvořený pouze pomocí CSS3. žádné obrázky ani skripty.

Google Doodle s CSS

Jeden z mnoha svátečních log z vyhledávače Google vytvořený v CSS. Toto je skvělý příklad dobrého využití animace CSS.

Posuvník

Dobře zpracovaný a kvalitní posuvník obrázků. Plus 4 příklady v ukázce.

Dvojitý animovaný prsten

Krásný animovaný a vícebarevný prsten s málo CSS kódem

Rozostření v CSS

Zdá se mi, že tento filtr je velmi potřebný, zejména proto, že je vyroben pomocí čistého CSS. Pomocí rozostření můžete přitáhnout pozornost uživatele k určitému bodu.

Kompletní průvodce Flexboxem

Tento článek je o responzivních blocích Flexbox. Mluví úplně o těchto blocích, i když je článek v angličtině.

Barevné a animované menu pomocí CSS3

Krásná rozbalovací nabídka pro webovou stránku s ikonami. Obrovským plusem je, že je celý vyroben v CSS.

CSS filtry

Vysoce kvalitní materiál v angličtině, který hovoří o použití CSS filtrů na obrázcích.

CSS formuláře

Příspěvek o formulářích CSS s mnoha příklady

Ukazatele průběhu v CSS

Lekce, jak vytvořit stylové ukazatele průběhu pomocí čistého CSS a animací. Můžete se také podívat na příklad a stáhnout si zdroje.

Animace - Animate.css

Nejpopulárnější CSS animační projekt na internetu současnosti. A pravděpodobně nejjednodušší a nejkvalitnější a navíc zdarma.

Indikátory zatížení - Spinkit

Abych byl upřímný, tyto ukazatele už na blogu byly vidět, ale zdá se mi, že stojí za to vám je znovu ukázat. Protože to jsou nejkrásnější CSS indikátory na internetu.

Tlačítka

V dnešní době je těžké překvapit tlačítky CSS, ale je to docela slušná možnost

Generátor pro vytváření přepínačů

Malá a kvalitní internetová aplikace, se kterou vytvoříte krásné přepínače pro použití na webu.

Popisky

CSS knihovna pro bezplatné popisky - Hint.css

Barevná schémata

Barevná schémata pro lidi, kteří se neradi vrtají v kódu

Před příchodem CSS3 při slově „animace“ polil designéry rozvržení studený pot. A to vše proto, že v té době nebylo vytváření vysoce kvalitní a krásné animace triviálním úkolem. CSS to nedokázalo, takže všechny animace byly provedeny v JavaScriptu. Bylo nutné prokousat spoustu fór, najít stejné soudruhy v neštěstí, strávit spoustu času vývojem a nakonec slyšet od designéra: „Dobře, to bude stačit.“ A když CSS3 konečně vyšlo, ohňostroj do rána neustal a šampaňské teklo jako řeka. Byl to skvělý den pro všechny webové vývojáře (další takový den byl, když Microsoft oznámil konec podpory pro Internet Explorer). S příchodem CSS3 se mnoho dříve složitých úkolů zjednodušilo a práce s nimi byla příjemná. Totéž platí pro animace v CSS, o kterých budu mluvit v tomto článku.

CSS přechody

Přechody CSS umožňují plynule a v průběhu času provádět změny vlastností CSS. Tímto způsobem získáte příležitost řídit proces přechodu prvku z jednoho stavu do druhého. Začněme jednoduchým příkladem a pojďme dál.

Když najedete kurzorem na čtverec, barva pozadí se plynule změní.

Nyní se podíváme blíže na to, jak spravovat přechody v CSS. Máme pouze 5 vlastností, které nám umožňují ovládat animaci přechodu:

• přechodová vlastnost;
• přechodné trvání;
• funkce časování přechodu;
• přechodové zpoždění;
• přechod;

přechodová vlastnost- určuje seznam vlastností, které budou animovány; vlastnosti zde neuvedené budou upraveny jako obvykle. Můžete animovat všechny vlastnosti pro konkrétní prvek zadáním hodnoty all. Pokud neurčíte žádné vlastnosti, výchozí hodnota je all.

Přechodová vlastnost: šířka;

přechodné trvání- nastavuje dobu trvání animace čas lze zadat v sekundách nebo milisekundách;

Doba trvání přechodu: 1s;

přechod-časování-funkce- funkce času, specifikuje body zrychlení a zpomalení za určitou dobu pro kontrolu změn rychlosti animace. Jednoduše řečeno, tuto vlastnost můžete použít k určení chování animace. Animaci můžeme například zrychlit na začátku a zpomalit na konci nebo naopak. Bézierovy křivky se používají k definování procesu animace. Obecně platí, že funkce načasování přechodu vám umožňuje vytvořit mnoho různých chování pro animace, toto je celé téma na článek, takže zde nebudeme zacházet hlouběji.

Transition-timing-function: cubic-bezier(0, 0, 1, 1);

přechod-zpoždění- nastavuje časové zpoždění před začátkem animace, lze zadat v sekundách nebo milisekundách.

Přechodové zpoždění: 500 ms;

přechod je obecná vlastnost, která umožňuje vypsat první čtyři vlastnosti v pořadí: vlastnost, trvání, funkce časování, zpoždění.

Přechod: barva pozadí 1s cubic-bezier(0, 0, 1, 1) 500 ms;

Máme tuto jednoduchou animaci: když najedete myší na čtverec, změní se šířka; doba trvání animace je jedna sekunda; animace se přehrává podle lineární funkce; zpoždění před spuštěním animace 500 milisekund.

S přechody CSS můžete animovat téměř všechny vlastnosti a vytvořit mnoho zajímavých, krásných, funkčních a dokonce komplexních animací, které doplní a vylepší váš projekt. Například jsem vytvořil tento Material-FAB ​​​​v čistém CSS pomocí přechodů:

CSS animace

Animace CSS umožňují vytvářet složitější animace než přechody CSS. Celé tajemství je v @keyframes. Pravidlo @keyframes vám umožňuje vytvořit animaci pomocí sady klíčových snímků, to znamená, že popisuje stav objektu v určitém okamžiku. Podívejme se na jednoduchý příklad.

Náš kruh ožil a zdá se, že pulzuje.

Existuje 9 vlastností, které vám umožňují ovládat animace CSS:

• název-animace;
• animace-trvání;
• funkce animace-časování;
• animace-zpoždění;
• animace-iterace-počet;
• animace-režie;
• animace-play-stav;
• režim animace;
• animace;

název-animace- zde je název animace, která spojuje pravidlo @keyframes s selektorem.

Název-animace: moje-animace; @keyframes moje-animace ( 0 % ( neprůhlednost: 0; ) 100 % ( neprůhlednost: 1; ) )

animace-iterace-počet- nastavuje počet opakování animace, výchozí hodnota je 1. Hodnota infinite znamená, že se animace bude přehrávat donekonečna.

Počet iterací animací: 2;

animace-režie- nastavuje směr animace.

Směr animace: reverzní;

animace-přehrát-stav- tato vlastnost řídí zastavení a přehrávání animace. Existují dvě hodnoty, running (animace se přehraje ve výchozím nastavení) a paused (zastaví animaci).

Stav přehrávání animace: pozastaveno;

režim animace- nastavuje, které vlastnosti CSS budou aplikovány na objekt před nebo po animaci. Může nabývat následujících hodnot:

• žádné - animované vlastnosti CSS budou aplikovány na objekt pouze při přehrávání animace a po dokončení se objekt vrátí do původního stavu;
• vpřed - animované vlastnosti CSS budou aplikovány na objekt po dokončení přehrávání animace;
• zpět - animované vlastnosti CSS budou aplikovány na objekt před zahájením přehrávání animace;
• obojí - animované vlastnosti CSS budou aplikovány na objekt před i po skončení animace;

Animation-fill-mode: backward;

Vlastnosti délka animace, funkce animace-časování, animace-zpoždění Fungují stejně jako podobné vlastnosti v přechodech CSS, o kterých jsem psal dříve, takže je nebudu opakovat.

Pomocí CSS animací můžete vytvářet poměrně složité animace bez použití JavaScriptu. Nápadným příkladem jsou loadery, tedy prvky, které ukazují, že se na vaší stránce něco načítá. Zde jsou nějaké příklady:

Modul cesty pohybu

CSS modulu Motion Path Module umožňuje vytvářet pohyb objektů po cestě prostřednictvím speciální vlastnosti motion-path. Dříve bylo možné takovou animaci provádět pouze pomocí SVG nebo složitých skriptů.

Tato specifikace má 3 vlastnosti:

• pohybová dráha;
• offset pohybu;
• pohyb-rotace;

pohybová cesta- tato vlastnost umožňuje určit body (souřadnice), po kterých se bude objekt pohybovat. Syntaxe je stejná jako u atributu cesty SVG.

Dráha pohybu: cesta("M 235,323 Q 412,440 365,615 Q 400,300 670,240 L 870,340 L 975,535 Q 730,600 630,535 z");

offset pohybu- tato vlastnost uvádí objekt do pohybu z počátečního bodu do koncového bodu. Přijímá buď dvojnásobnou délku, nebo procento. Aby se objekt začal pohybovat, musíte definovat animaci, která půjde od 0 do 100 %.

@keyframes airplane-fly ( 0 % ( posun pohybu: 0; ) 100 % ( posun pohybu: 100 %; ) )

pohyb-rotace- tato vlastnost umožňuje určit, kterou stranou dopředu se objekt posune. Můžete zadat auto, reverzní nebo vlastní hodnotu ve stupních ("-45deg", "30deg" atd.).

Pohyb-rotace: auto;

Pohybová cesta je bohužel zatím podporována pouze v Chrome a Opeře, ale doufejme, že jejich příkladu budou brzy následovat i ostatní prohlížeče, protože věc je opravdu užitečná.

Pro ty, kteří ještě nepochopili, jak to funguje, nebo to chtějí lépe pochopit, jsem udělal příklad (odkaz na codeopen).

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 jakékoli prvky html, stejně jako na pseudoprvky :před A :po

Podpora prohlížeče

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

1. Vytvořte samotnou animaci pomocí klíčového slova @keyframes
2. Připojte jej k prvku, který je třeba animovat, a zadejte potřebné vlastnosti.

pravidlo @keyframes

Pravidlo @klíčové snímky umožňuje vytvořit 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 z A na(ekvivalent hodnot 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 počáteční ( z, 0 %) nebo konečná ( na, 100%), prohlížeč pro ně nastaví vypočítané hodnoty vlastností animace tak, 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 bezprostředně po vlastnosti @klíčové snímky musí následovat název této 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í ( z ( 50% { 100% { transform: translateX(0px);

Vytvořili jsme animaci, která funguje takto:

1. Začátek animace ( z mohlo být zapsáno 0%) — poloha prvku podél osy X je 0px;
2. Uprostřed animace (50 %) – pozice prvku podél osy X je 130 pixelů;
3. Konec animace ( na 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í ( z ( 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ů - název-animace A délka animace.

Název animace

Vlastnictví název-animace 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

Vlastnictví funkce animace-časování 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: ulehčit, zklidnění, uvolnění , easy-in-out, lineární , krokový start , krokový 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 pomocí funkce přeměnit na sadu diskrétních hodnot kroky(počet kroků, směr), jehož argumenty určují počet jeho kroků a směr, který může nabývat hodnot Start nebo konec .

• ulehčit- 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 spustí rychle 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.
• zdědit— zdědí tuto vlastnost z rodičovského prvku.

Vizuální srovnání

Animace zpoždění

Vlastnictví animace-zpoždění 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ě nastaveného času délka animace. 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

Vlastnictví animace-iterace-počet umožňuje spustit animaci několikrát. Neděděno. Nastavte hodnotu na libovolnou kladnou hodnotu 1, 2, 3 … atd. nebo nekonečný pro nekonečné opakování. Význam 0 nebo jakékoli záporné číslo odstraní animaci z přehrávání.