Příklady CSS animací a hotový kód. Devět jednoduchých příkladů animací CSS3 Animované londýnské kolo dvou prvků

Poslední aktualizace: 11/06/2016

Animace poskytuje skvělé příležitosti pro změnu stylu prvku. V 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ů. Každý klíčový snímek definuje jednu sadu hodnot pro vlastnosti, které se mají animovat. A sekvenční změna takových klíčových snímků bude ve skutečnosti představovat animaci.

Přechody v podstatě používají stejný model – dva klíčové snímky jsou také implicitně definovány – začátek a konec a samotný přechod představuje přechod z počátečního do koncového klíčového snímku. Jediný rozdíl oproti animaci je v tomto případě v tom, že pro animaci můžete definovat mnoho mezilehlých klíčových snímků.

Obecně má deklarace klíčového snímku v 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. Alespoň dva klíčové snímky jsou pak definovány ve složených závorkách. Blok za klíčovým slovem from deklaruje 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 při vytváření běžného stylu.

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

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

Tato animace poskytuje přechod z červené barvy pozadí na modrou barvu pozadí. Po dokončení animace se navíc nastaví barva, která je definována pro prvek div.

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

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é spustit animaci na základě akce uživatele. Například definováním stylu pro pseudotřídu :hover můžete určit, že se animace spustí, když ukazatel myši najede na prvek:

@keyframes backgroundColorAnimation ( from ( background-color: red; ) to ( background-color: blue; ) ) div( width: 100px; height: 100px; margin: 40px 30px; border: 1px solid #333; background-color: # ccc; ) div:hover( název-animace: backgroundColorAnimation; trvání-animace: 2 s; )

Spousta 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žít mnoho přechodných snímků. K určení snímku doplnění se použije procento animace, ve které by se měl snímek 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 atd.

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

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

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

@keyframes backgroundColorAnimation ( od ( barva pozadí: červená; ) do ( barva pozadí: modrá; ) ) @keyframes opacityAnimation ( od ( opacity: 0,2; ) do ( opacity: 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; )

Hodnota vlastnosti animation-name uvádí seznam animací oddělených čárkami a vlastnost animation-duration také nastavuje čas těchto animací oddělených čárkami. Název animace a její čas se shodují s pozicí, to znamená, že opacityAnimace bude trvat 3 sekundy.

Dokončení animace

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

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

Počet iterací animací: 3;

Pokud chcete, aby se animace spouštěla ​​nekonečně mnohokrát, pak je tato vlastnost nastavena na nekonečno :

Počet animací: nekonečno;

Při opakování se animace spustí znovu od počátečního klíčového snímku. Ale pomocí animace-direction: alternative; property opačný směr animace při opakování. To znamená, že začne koncovým klíčovým snímkem a poté přejde 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í animovaný prvek do stylu, který by měl před použitím animace. Ale vlastnost animation-fill-mode: forwards vám umožňuje nastavit konečnou hodnotu animované vlastnosti přesně na 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 sekunda */

Funkce hladké animace

Stejně jako u přechodů můžete na animace použít stejné funkce vyhlazování:

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

snadnost : funkce usnadnění, kde se animace zrychluje směrem ke středu a zpomaluje ke konci, což poskytuje přirozenější variace

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, kdy se animace zrychluje směrem ke středu a zpomaluje ke konci, což poskytuje přirozenější variace

cubic-bezier : Pro animaci se používá kubická Bezierova funkce

Chcete-li nastavit funkci hladkosti, použijte vlastnost animation-timing-function:

@keyframes backgroundColorAnimation ( od ( background-color: red; ) do ( background-color: blue; ) ) div( width: 100px; height: 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 vlastnosti popsané výše:

Animace: název-animace-animace-trvání animace-časování-funkce animace-iterace-počet animace-směr animace-zpoždění animace-výplňový-režim

První dva parametry, které poskytují název a čas 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:

Zde běží tři animace současně. Animace "banner" mění barvu pozadí banneru a 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 Poskytuje webům dynamiku. 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

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

1. Klíčové snímky

Klíčové snímky se používají k určení hodnot vlastností animace v různých bodech animace. Klíčové snímky definují chování jednoho animačního cyklu; animace se může opakovat nula nebo vícekrát.

Klíčové snímky jsou specifikovány pomocí pravidla @keyframes, definovaného takto:

Název animace @keyframes (seznam pravidel)

Tvorba animace začíná instalací klíčové rámečky 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 je definováno více pravidel @keyframes se stejným názvem, spustí se poslední v pořadí dokumentů a všechna předchozí budou ignorována.

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

1.1. Funkce časování pro klíčové snímky

Pravidlo stylu klíčového snímku může také deklarovat dočasnou funkci, která by měla být použita, když se animace přesune na další klíčový snímek.

Příklad

@keyframes bounce (od (od (horní: 100px; funkce-časování-animace: náběh); ) 25 % (horní: 50px; funkce časování animace: náběh; ) 50 % (horní: 100px; časování animace- funkce: náběh; ) 75 % ( nahoře: 75 pixelů; funkce časování animace: náběh; ) až ( nahoře: 100 pixelů; ) )

Pro animaci s názvem „bounce“ je určeno pět klíčových snímků. Mezi prvním a druhým klíčovým snímkem (tj. mezi 0 % a 25 %) se používá funkce náběhu/doběhu. Mezi druhým a třetím klíčovým snímkem (tedy mezi 25 % a 50 %) se používá funkce plynulé akcelerace. A tak dále. Prvek se posune na stránce nahoru o 50 pixelů, zpomalí se, když dosáhne svého nejvyššího bodu, a poté se zrychlí, když klesne na 100 pixelů. Druhá polovina animace se chová podobně, ale posune prvek pouze o 25 pixelů nahoru na stránce.

Funkce časování zadaná v klíčovém snímku to nebo 100 % je ignorována.

2. Název animace: vlastnost název-animace

Vlastnost animation-name určuje seznam animací použitých na prvek. Každý název se používá k výběru klíčového snímku v pravidle, které poskytuje hodnoty vlastností pro animaci. Pokud název neodpovídá žádnému klíčovému snímku v pravidle, neexistují žádné vlastnosti k animaci nebo neexistuje žádný název animace, animace se nespustí.

Pokud se více animací pokusí změnit stejnou vlastnost, spustí se animace, která je nejblíže konci seznamu jmen.

V názvu animace se rozlišují velká a malá písmena a klíčové slovo none není povoleno. Doporučuje se použít název, který odráží podstatu animace, a můžete použít jedno nebo více slov uvedených s pomlčkou - nebo znakem podtržítka _ .

Nemovitost se nedědí.

Syntax

Název-animace: žádný; název-animace: test-01; název-animace: -posuvný; název-animace: pohyb-vertikálně; název-animace: test2; název-animace: test3, pohyb4; název-animace: počáteční; název-animace: dědit;

3. Doba trvání animace: vlastnost animation-duration

Vlastnost animation-duration určuje dobu trvání jednoho animačního cyklu. Udává se v sekundách s nebo milisekundách ms. Pokud má prvek zadanou více než jednu animaci, můžete pro každou nastavit jiný čas uvedením hodnot oddělených čárkami.

Nemovitost se nedědí.

Syntax

Délka animace: 0,5 s; délka animace: 200 ms; délka animace: 2s, 10s; délka animace: 15s, 30s, 200ms;

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

Vlastnost animation-timing-function popisuje, jak bude animace probíhat mezi každým párem klíčových snímků. Během zpoždění animace nejsou použity funkce časování.

Nemovitost se nedědí.

Syntax

Funkce časování animace: snadnost; animace-časování-funkce: easy-in; animace-časování-funkce: easy-out; animace-časování-funkce: easy-in-out; animační funkce časování: lineární; animace-časování-funkce: krokový start; animace-časování-funkce: step-end; animace-časování-funkce: cubic-bezier(0.1, 0.7, 1.0, 0.1); animační-časová-funkce: kroky(4, konec); animace-časování-funkce: lehkost, krokový start, cubic-bezier(0,1, 0,7, 1,0, 0,1); animační-časovací-funkce: počáteční; animace-časování-funkce: dědit;

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

5. Opakování animace: vlastnost animation-itration-count

Vlastnost animation-itation-count určuje, kolikrát se smyčka animace přehraje. Počáteční hodnota 1 znamená, že se animace přehraje od začátku do konce jednou. Tato vlastnost se často používá ve spojení s alternativní hodnotou vlastnosti animation-direction, která způsobuje, že se animace přehrává v obráceném pořadí v alternativních smyčkách.

Nemovitost se nedědí.

Syntax

Počet-iterací animací: nekonečný; animace-počet-iterací: 3; počet animací: 2,5; animace-iterace-počet: 2, 0, nekonečno;

6. Směr animace: vlastnost animation-direction

Vlastnost animation-direction určuje, zda se má animace přehrávat v obráceném pořadí v některých nebo všech smyčkách. Když se animace přehrává v opačném pořadí, funkce časování se také obrátí. Například při přehrávání v opačném pořadí se funkce náběhu bude chovat jako náběhový náběh.

Nemovitost se nedědí.

Chcete-li určit, zda je opakování smyčky animace sudé nebo liché, počet opakování začíná na 1.

Syntax

Směr animace: normální; animace-směr: reverzní; animace-směr: střídat; animace-směr: střídavě-zpětně; směr animace: normální, obrácený; animace-směr: střídavě, obráceně, normální; směr animace: počáteční; animace-směr: zdědit;

7. Přehrávání animace: vlastnost animation-play-state

Vlastnost animation-play-state určuje, zda se animace spustí nebo pozastaví. 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 .

Nemovitost se nedědí.

Syntax

Animation-play-state: running; animace-přehrát-stav: pozastaveno; animace-play-state: pozastaveno, běží, běží; animace-přehrát-stav: počáteční; animace-přehrát-stav: dědit;

8. Zpoždění animace: vlastnost zpoždění animace

Vlastnost animation-delay určuje, kdy se animace spustí. Udává se v sekundách s nebo milisekundách ms.

Nemovitost se nedědí.

Syntax

Zpoždění animace: 5s; zpoždění animace: 3s, 10ms;

9. Stav prvku před a po přehrání animace: vlastnost animation-fill-mode

Vlastnost animation-fill-mode určuje, jaké hodnoty jsou aplikovány animací mimo dobu jejího provádění. Po dokončení animace se prvek vrátí do původních stylů. Ve výchozím nastavení animace neovlivňuje hodnoty vlastností, když je animace aplikována na prvek - animation-name a animation-delay . Ve výchozím nastavení navíc animace po dokončení neovlivňují hodnoty vlastností animation-duration a animation-itation-count. Vlastnost animation-fill-mode může toto chování potlačit.

Nemovitost se nedědí.

Syntax

Animation-fill-mode: none; animační-vyplňovací režim: vpřed; animační-vyplňovací režim: zpět; animační-vyplňovací-mód: obojí; animační-vyplňovací režim: žádný, pozpátku; animační-vyplňovací režim: oba, vpřed, žádný;

10. Stručný popis animace: vlastnost 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.

11. Vícenásobné animace

Pro jeden prvek můžete nastavit několik animací a jejich názvy oddělené čárkami:

Div (animace: stín 1s náběh 0,5s střídavě, pohyb 5s lineární 2s;)

| 18.02.2016

CSS3 otevírá neomezené možnosti pro designéry uživatelského rozhraní a hlavní výhodou je, že téměř jakýkoli nápad lze snadno implementovat a uvést do života bez použití JavaScriptu.

Je úžasné, jak jednoduché věci dokážou oživit obyčejnou webovou stránku a učinit ji pro uživatele dostupnější. Řeč je o přechodech CSS3, pomocí kterých můžete prvku povolit transformaci a změnu stylu například při najetí myší. Devět příkladů animací CSS3 dostupných níže vám pomůže vytvořit na vašem webu responzivní dojem a také zlepšit celkový vzhled stránky pomocí krásných a plynulých přechodů.

Pro podrobnější informace si můžete stáhnout archiv se soubory.

Všechny efekty fungují pomocí vlastnosti přechodu. přechod- „transition“, „transformation“) a pseudotřída:hover, která určuje styl prvku, když na něj najede kurzor myši (v našem tutoriálu). Pro naše příklady jsme použili div 500x309 px, počáteční barvu pozadí #6d6d6d a dobu přechodu 0,3 sekundy.

Body > div ( šířka: 500px; výška: 309px; pozadí: #6d6d6d; -webkit-transition: všech 0,3 s lehkost;; -moz-přechod: všech 0,3 s lehkost;; -o-přechod: všech 0,3 s lehkost;; přechod: všech 0,3 s snadnost;)

1. Změňte barvu při najetí myší

Kdysi byla implementace takového efektu docela namáhavá práce s matematickými výpočty určitých hodnot RGB. Nyní stačí napsat CSS styl, ve kterém je potřeba přidat pseudo-class:hover do selektoru a nastavit barvu pozadí, která plynule (za 0,3 sekundy) nahradí původní barvu pozadí, když najedete na blok:

Barva:hover (pozadí:#53ea93; )

2. Vzhled rámu

Zajímavou a nápadnou proměnou je vnitřní rámeček, který se plynule objeví, když najedete myší. Dobře se hodí pro zdobení různých knoflíků. K dosažení tohoto efektu používáme pseudo-class:hover a vlastnost box-shadow s parametrem inset (nastavuje stín uvnitř prvku). Navíc budete muset nastavit roztažení stínu (v našem případě je to 23px) a jeho barvu:

Border:hover ( box-shadow: inset 0 0 0 23px #53ea93; )

3. Houpačka

Tato CSS animace je výjimkou, protože zde není použita vlastnost přechodu. Místo toho jsme použili:

• @keyframes je základní direktiva pro tvorbu CSS animace snímek po snímku, která umožňuje provádět tzv. scénář a popište animaci jako seznam klíčových bodů;
• animation a animation-itation-count - vlastnosti pro nastavení parametrů animace (trvání a rychlost) a počtu cyklů (opakování). V našem případě opakujte 1.

4. Útlum

Efekt vyblednutí je v podstatě jednoduchá změna průhlednosti prvku. Animace vzniká ve dvou fázích: nejprve je potřeba nastavit počáteční stav průhlednosti na 1 – tedy úplné neprůhlednost, a poté zadat její hodnotu při najetí myší – 0,6:

Fade ( opacity: 1; ) .fade:hover ( opacity: 0.6; )

Pro opačný výsledek vyměňte hodnoty:

5. Zvětšení

Aby se blok zvětšil, když na něj najedete myší, použijeme vlastnost transform a nastavíme ho na scale(1.2) . V tomto případě se blok zvýší o 20 procent při zachování jeho proporcí:

Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )

6. Redukce

Zmenšení prvku je stejně snadné jako jeho zvětšení. Pokud jsme v pátém bodě pro zvětšení měřítka potřebovali zadat hodnotu větší než 1, pak pro zmenšení bloku jednoduše určíme hodnotu, která bude menší než jedna, například scale(0.7) . Nyní, když najedete myší, blok se proporcionálně zmenší o 30 procent své původní velikosti:

Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )

7. Transformace do kruhu

Jednou z běžně používaných animací je obdélníkový prvek, který se po najetí myší přemění na kruh. Pomocí vlastnosti border-radius CSS, používané ve spojení s :hover and transition , toho lze dosáhnout bez problémů:

Kruh:hover (poloměr ohraničení: 70 %; )

8. Rotace

Zábavnou možností animace je otočení prvku o určitý počet stupňů. K tomu budeme opět potřebovat vlastnost transform, ale s jinou hodnotou - rotationZ(20deg) . S těmito parametry bude blok otočen o 20 stupňů ve směru hodinových ručiček vzhledem k ose Z:

Rotate:hover ( -webkit-transform: rotationZ(20deg); -ms-transform:otočteZ(20deg); transform:otočteZ(20deg); )

9. 3D stín

Názory designérů na to, zda je tento efekt vhodný v flat designu, se liší. Tato CSS3 animace je však zcela originální a používá se i na webových stránkách. Trojrozměrného efektu dosáhneme pomocí již známých vlastností box-shadow (vytvoří vícevrstvý stín) a transformujeme parametrem translateX(-7px) (zajistí horizontální posun bloku doleva o 7 pixelů ):

Threed:hover ( box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px9 #53ea73, 5eapxit- #3px -web -7px); transform: translateX(-7px); )

Podpora prohlížeče

Vlastnosti přechodu aktuálně podporují následující prohlížeče:

Zbývající vlastnosti použité v těchto příkladech, jako je transform , box-shadow atd., jsou také podporovány téměř všemi moderními prohlížeči. Pokud však tyto nápady hodláte použít pro své projekty, důrazně doporučujeme zkontrolovat kompatibilitu mezi různými prohlížeči.

Doufáme, že vám tyto příklady animací CSS3 byly užitečné. Přejeme vám kreativní úspěch!

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ů layoutů a designérů, kteří se snaží dokázat, že je nyní možné dělat téměř vše pouze s čistým 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.

). CSS3 nám poskytuje další výkonnější animační nástroj, který přesahuje jen jeden přechod a umožňuje nám tvořit neomezený počet takových přechodů.

Jinými slovy, animace nám umožňuje pohybovat se od jeden stavu (souboru vlastností) do druhý, z druhý Na Třetí a i v případě potřeby přehrajte animaci v opačném pořadí, když je počet přechodů dokončen.

Podobně jako u přechodových efektů, aby se animace přehrála, musíte spustit její přehrávání, ať už při prvním načtení stránky, nebo když se prvek zaostří, když ukazatel myši najede na prvek a tak dále.

Fáze tvorby animace

Podívejme se, v čem spočívá proces tvorby animace v CSS. Nejprve musíte definovat klíčové snímky animace. Co je klíčový rámec? Představte si prvek, který je umístěn nalevo od okna prohlížeče a potřebujete jej animovat doprostřed okna a vrátit jej do původní polohy. Pro tuto animaci potřebujeme tři klíčové snímky:

• První– definuje počáteční polohu prvku.
• Druhý– určuje polohu prvku po přesunutí prvku doprostřed okna.
• Třetí– definuje koncový bod animace (počáteční polohu prvku).

Jakmile budou definovány potřebné klíčové snímky, bude na prohlížeči uživatele, aby nakreslil všechny mezifáze, které jsme pomocí klíčových snímků definovali. To znamená, že úkol nakreslit prvek v těchto intervalech leží výhradně na prohlížeči, z naší strany potřebujeme pouze specifikovat tyto body animace, nebo jinými slovy, musíme prohlížeči sdělit, jak se má změnit z jednoho stylu na druhý. mezi klíčovými snímky.

Dalším krokem je přiřazení animace prvku nebo prvkům, které nás zajímají. V tomto případě je možné určit individuální nastavení animace pro každý prvek.

Později v tomto článku se podrobně podíváme na to, jak nastavit zpoždění animace, jak nastavit počet cyklů animace, nastavit její trvání, udat její rychlost a směr, stav animace v aktuálním okamžiku a dokonce určit styl prvku v době, kdy se animace nepřehrává.

Než přejdeme k vytváření animací, rád bych vás upozornil na současnou podporu vlastností animací v prohlížečích:

Definování klíčových snímků

Výsledek našeho příkladu:

Zvažte následující příklad, ve kterém vytvoříme několik různých animací a přiřadíme je k jednomu prvku.

V tomto příkladu jsme vytvořili několik animací, ve kterých se postupně zvětšuje šířka prvku, mění se barva pozadí a prvek se negativně naklání vzhledem ke své ose. X(horizontální osa) do středu animace a ke konci animace se prvek zmenšuje na původní velikost prvku, což je doprovázeno změnou barvy pozadí a nakloněním prvku podél osy X obrácený.

Výsledek našeho příkladu:

Počet animačních cyklů

Ve výchozím nastavení se přehraje jakákoli animace v CSS jen jednou. Díky vlastnosti animation-itation-count budeme moci určit, kolikrát se bude smyčka animace přehrávat, může to být libovolný počet opakování, nebo můžeme uvést, že se animace bude přehrávat neomezeně dlouho, v některých případech je velmi užitečné.

Vezměte prosím na vědomí, že Záporné hodnoty jsou zakázány z objektivních důvodů, ale je povoleno specifikovat neceločíselné hodnoty, v takovém případě se přehraje pouze část cyklu animace - v poměru k zadané hodnotě (např. 1.5 odpovídá přehrání animačního cyklu jedenapůlkrát).

Zvažte následující příklad:

V tomto příkladu jsme vytvořili jednoduchou animaci, ve které používáme vlastnost top CSS k přesouvání relativně umístěných prvků vzhledem k hornímu okraji aktuální pozice, přičemž měníme barvu pozadí prvku.