Css nekonečná animace. Devět jednoduchých příkladů animací CSS3

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 CSS animací

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 na 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ší indikátory na internetu pomocí CSS.

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

Dobrý den, milí čtenáři. V tento den si povíme o docela zajímavé věci jménem CSS animace. To znamená, že tato animace prvků se provádí pouze pomocí stylů a nejsou zde použity žádné skripty.

Jak vidíte, je zde atribut :vznášet se, který změní styl pozadí při umístění kurzoru, v některých příkladech by měl být vyžadován.

Hladce změňte barvu prvku při najetí myší pomocí přechodu

#box1 (
margin-bottom: 5px;
barva pozadí: #ccc;

odsazení: 10px;
text-align: center;
šířka: 200px;
výška:100px;

odsazení textu: 0px;
ohraničení: 1px plný #888;
-moz-přechod: barva pozadí 0,8 s 0,1 s lehkost;
-o-přechod: barva pozadí 0,8s 0,1s náběh;
-webkit-transition: background-color 0,8s 0,1s easy;
kurzor: ukazatel ;)

#box1 :vznášet se {
barva pozadí: #97CE68;
barva: #333;
}

Jak vidíte, této animace jsme dosáhli pomocí atributu přechod. Zde můžete měnit rychlost animace v sekundách, v tomto případě je to 0,8 s, než se barva úplně změní při najetí na ni a 0,1 s, než animace funguje po najetí a odstranění kurzoru. (Omlouvám se za hádanku :-)) Tuto hodnotu lze podle potřeby změnit.

Barva pozadí při najetí myší je nastavena jako atribut :vznášet se, je to zde povinné, jinak animace nebude fungovat.

Změna velikosti prvku

#box2 (
margin-bottom: 5px;
barva pozadí: #ccc;
barva: #333;

odsazení: 10px;
text-align: center;
šířka: 200px;
výška:100px;

odsazení textu: 0px;
ohraničení: 1px plný #888;
-moz-přechod: všechny 1s lineární;
-o-přechod: všechny 1s lineární;
-webkit-transition: všechny 1s lineární;
kurzor: ukazatel ;)

#box2 :vznášet se {
barva pozadí: #97CE68;
barva: #000;
šířka: 150px;
výška:50px;
}

V tomto příkladu jsme dosáhli hladké změny velikosti bloku při najetí myší. Standardní hodnota je 200 x 100 a hodnota přechodu je 150 x 50, což je nastaveno atributem :vznášet se.

Zde můžete také změnit blok pouze na šířku nebo výšku, stačí :vznášet se vymazat šířka:— blok se mění pouze na výšku, výška:— blok se mění pouze na šířku.

Můžete také změnit rychlost změny. V tomto případě je to 1s.

Torze objektu

#box3 (
margin-bottom: 5px;
barva pozadí: #ccc;
barva: #333;

odsazení: 10px;
text-align: center;
šířka: 200px;
výška:100px;

odsazení textu: 0px;
ohraničení: 1px plný #888;
-moz-transition: všechny 1s 0,1s náběh;
-o-přechod: všechny 1s 0,1s náběh;
-webkit-transition: všechny 1s 0.1s náběh;
kurzor: ukazatel ;)

#box3:hover (
barva pozadí: #97CE68;
barva: #000;
-webkit-transform: otočit (360 stupňů);
-moz-transform: otočit (360 stupňů);
-o-transformace: otočení (360 stupňů);
}

Torze nastává pomocí transformovat A přechod. V tomto případě se objekt otočí ve směru hodinových ručiček o 360 stupňů rychlostí jedné sekundy. Pokud chcete, aby se blok otáčel proti směru hodinových ručiček, transformovat hodnota by měla být nastavena na - (mínus). Stupeň rotace lze samozřejmě měnit.

Plynulé přibližování a oddalování objektu

#box4 (
margin-bottom: 5px;
barva pozadí: #ccc;
barva: #333;
odsazení: 10px;
text-align: center;
šířka: 200px;
výška:100px;

odsazení textu: 0px;
ohraničení: 1px plný #888;
-moz-transition: uvolnění všech 3s;
-o-přechod: uvolnění všech 3s;
-webkit-transition: všechny 3s snadné-out;
kurzor: ukazatel ;)

#box4:hover (
barva pozadí: #97CE68;
barva: #000;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transformace: měřítko(2);
}

V tomto příkladu se velikost bloku plynule zvětší 2krát. Tato hodnota je nastavena transformace: měřítko(2). Pokud nastavíte hodnotu na 1,5, blok se zvětší 1,5krát.

Stejným způsobem můžete zmenšit velikost blok, nastavte například hodnotu na 0,5.

Hladký posun bloku dolů

#box5 (
margin-bottom: 5px;
barva pozadí: #ccc;
barva: #333;
odsazení: 10px;
text-align: center;
šířka: 200px;
výška:100px;

odsazení textu: 0px;
ohraničení: 1px plný #888;
-moz-transition: všechny 1s easy-in-out;
-o-přechod: všechny 1s náběh a výstup;
-webkit-transition: všechny 1s easy-in-out;
kurzor: ukazatel ;)

#box5:hover (
barva pozadí: #97CE68;
barva: #000;
-webkit-transform: translate(0,50px);
-moz-transform: translate(0,50px);
-o-transform: translate(0,50px);
}

Pohyb je zde specifikován v pixelech. V tomto případě (0,50px). S touto hodnotou 0,-50px můžete blok také zvýšit. Nebo diagonálně dolů 50px, 50px. Jedním slovem, blok se může pohybovat kamkoli.

To je v podstatě vše, co jsem chtěl říct. Ne, ne všechno :-) Zapomněl jsem připomenout, že tuto CSS animaci lze aplikovat na jakékoli objekty na webu: obrázky, text, nadpisy, ikony atd. U odkazů je hladká změna barvy podle mého názoru velmi krásná; :-)

A také tuto informaci s námi sdílel web shpargalkablog.ru. Za což mu moc děkuji.

To je teď určitě vše :-) Brzy na viděnou, přátelé.

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 tím nejjednodušší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 přechod-časování-funkce umožňuje vytvořit mnoho různých chování pro animace, toto je celé téma pro článek, takže zde nebudeme zacházet do hloubky.

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;
• 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 je několik příkladů:

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).

Animace CSS3 je poměrně široce používaná. Nastal čas, aby i ti nejzačátečníci stavitelé 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.
• @keyframes moje-animace ( 0 % ( neprůhlednost: 0; ) 100 % ( neprůhlednost: 1; ) )— 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ž dostačující pro 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:

Výše nastavíme první a poslední snímek. Všechny mezistavy budou počítány 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 skutečném příkladu, ale nejlepší je to udělat sami na nějaké testovací HTML stránce.

Když se učíte programovací jazyk, obvykle napíšete program „Ahoj, světe!“, ze kterého pochopíte syntaxi tohoto jazyka a některé další základní věci. 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 například: ať máme nějaký blok