Jak používat CSS3 přechody a animace zvýraznit změny uživatelského rozhraní

Návrháři a umělci mají dlouhou historii experimentování s pohybem, efekty a různými druhy iluzí s cílem přidat do své práce další vrstvu. Hnutí op art začalo používat optické iluze v 60-tých letech dávat dojem pohybu.

Od té doby se objevily novější a novější přístupy, například nedávno populární kinetické umění, které rozšiřuje diváckou perspektivu pomocí vícerozměrného pohybu. Pohyb se objevil také v počítačové vědě s vynálezem prvního blikajícího kurzoru v roce 1967.

Ve vývoji frontendu byly prvky DOM obvykle animovány JavaScriptem před vydáním CSS3 a je to metoda, která stále funguje, ale nové vlastnosti zavedené CSS3 nám umožňují vylepšit naše návrhy s různými efekty a pohybem intuitivnějším způsobem.

Dvě hlavní techniky CSS3 nabízí přechody a animace. V tomto příspěvku se podíváme na to, co jsou, jaký je rozdíl mezi nimi a jak je můžete využít.

Přechody

Přechody a animace jsou zvyklé vizualizovat změny ve stavu HTML elementu pomocí modifikace jedné nebo více jejích vlastností CSS.

Nejjednodušší formou vizualizace změny stavu je změna barvy tlačítka nebo odkazu, když se vznáší. Když se to stane, prvek dostane mírně odlišný styl, který si divák obvykle všimne, jako by se na obrazovce něco pohnulo.

Změna vlastností CSS odkazu na vznášedle (nebo fokusu nebo kliknutí) je nejstarší a nejjednodušší formou přechodů a existovala dobře před érou CSS3.

 a barva: oranžová;  a: hover barva: červená;  a: focus barva: modrá;  a: navštíveno barva: zelená; 

Přechody se používají, když se prvek HTML změní z jednoho předdefinovaného stavu na jiný. CSS3 zavedla nové vlastnosti, které umožňují sofistikovanější vizualizace než dříve, jako jsou funkce časování nebo řízení doby trvání.

Podíváme se na nové vlastnosti CSS v další části po pochopení toho, jak se animace liší. Prozatím se podívejme na nejdůležitější věci, které potřebujete vědět o přechodech.

1. Vždy mají začátek a konec.
2. Stavy mezi počátečním a koncovým bodem jsou implicitně definovány prohlížečem, nemůžeme to změnit pomocí CSS.
3. Vyžadují explicitní spouštění, například přidání nového pseudoclassu pomocí CSS nebo nové třídy jQuery.

Můžete vidět krásný příklad inteligentně využívaných přechodů CSS3 níže, ve kterých autor odhaluje skryté informace způsobem, který je neintruzivní, ale stále řídí zaměření uživatelů na nový obsah..

Animace

Chceme-li vizualizovat stavové změny s komplikovanějšími pohyby, nebo pokud nemáme explicitní spouštěč, např. chceme-li spustit efekt, když se stránka načte, animace jsou způsob, jak jít.

Animace umožňují definovat složitější cestu nastavením a konfigurací vlastní klíčových snímků. Klíčové snímky jsou průběžné body v průběhu animace, které nám umožňují měnit styl animovaného prvku tolikrát, kolikrát chceme.

Ačkoli CSS3 nabízí skvělé způsoby, jak budovat sofistikované animace, je obvykle obtížnější je vytvořit než přechody, proto existuje mnoho skvělých knihoven animací, které nám mohou usnadnit práci..

Mezi nejdůležitější věci, které potřebujete vědět o animacích CSS3, patří:

1. nevyžadují explicitní spouštění, mohou začít načtením stránky nebo v případě, že v prohlížeči dojde k jiné události DOM
2. mohou být použity v případech, kdy jsou použity přechody, například když je přidána nebo odebrána nová třída nebo pseudoclass (i když je to méně častý případ použití)
3. vyžadují, abychom definovali některé klíčové snímky (mezilehlé stavy)
4. můžeme určit číslo, frekvenci a styl těchto klíčových snímků

V níže uvedeném příkladu můžete vidět cool animované rozbalovací menu. Animace začíná, když klikneme na tlačítko. Toho je dosaženo přidáním dalších tříd do elementů seznamu pomocí jQuery, když nastane událost click.

Tyto nové třídy jsou animovány se zadaným @ keyframes pravidla v souboru CSS. Třídy navíc odstraní jQuery, když uživatel příště klikne na tlačítko a nabídka se opět skryje.

Vlastnosti CSS a @ keyframes At-Rule

Pro přechody můžeme použít buď přechod zkratková vlastnost nebo 4 vlastnosti související s přechodem: vlastnost přechodu, doba trvání přechodu, funkce časování přechodu, a zpoždění přechodu. Zkratka vlastnost obsahuje všechny jednotlivé vlastnosti ve zkrácené formě.

Pro animace je tu animace zkrácený majetek u našich rukou, který znamená ne méně než 8 jednoduchých animačních vlastností, jmenovitě název animace, trvání animace, funkce časování animace, zpoždění animace, počet animací-iterací, směr animace, režim animace-výplně, a animace-play-state.

Nejdůležitější věcí jak s přechody, tak i animacemi je to, že jsme vždy specifikovat vlastnosti CSS, které budou během změny stavu upraveny. S přechody vypadá takto:

 .element background: orange; vlastnost přechod: pozadí; doba přechodu: 3s; funkce časování přechodu: easy-in;  .element: hover background: red; 

Zadali jsme Pozadí vlastnost, protože to je to, co se během přechodu změní.

V jednom přechodu můžeme změnit více než jednu vlastnost CSS, v tomto případě by výše uvedený kód byl změněn takto: vlastnost přechod: pozadí, hranice;. Můžeme také použít vlastnost přechodu: vše;, pokud nechceme specifikovat každou vlastnost zvlášť.

Můžeme si vybrat zkratku přechod majetku. Pokud tak učiníme, musíme vždy věnovat pozornost správnému pořadí vnitřních vlastností (viz syntaxe v dokumentech).

 .element background: orange; přechod: jednoduché pozadí 3s;  .element: hover background: red; 

Pokud chceme vytvořit animaci, musíme specifikovat související klíčových snímků. Vlastnosti CSS musí být upraveny samostatně @ keyframes pravidla. Zde je příklad, jak toho dosáhnout:

 .element position: relativní; animation-name: slide; doba trvání animace: 3s; funkce animace-načasování: jednoduchost;  @keyframes snímek 0% vlevo: 0;  50% vlevo: 200px;  100% vlevo: 400px; 

Ve výše uvedeném příkladu jsme vytvořili velmi jednoduchý posuvný efekt. Definovali jsme název animace, pak na ni navázali 3 klíčové snímky, které jsme specifikovali v @ slideframe … pravidla. Procenta se vztahují k délce animace, takže 50% se stane v příkladu 1,5s.

Mohli bychom použít zkratku animace vlastnost, nebo by mohla definovat klíčové snímky s jednodušší od Pro pravidlo následujícím způsobem:

 .element position: relativní; animace: slide 3s easy-in;  @keyframes slide from left: 0;  na vlevo: 400px; 

Vytváření složitějších animací je jeho vlastní formou umění, pokud máte zájem, můžete si přečíst dva naše animační tutoriály o tom, jak vytvořit pokročilý výběr a jak vytvořit efekt odrazu.

Když budujete přechody a animace, musíte to vědět ne všechny vlastnosti CSS lze animovat, takže je vždy dobré zkontrolovat vlastnost, kterou chcete změnit v CSS Animatable.

CSS3 animace a přechody pracovaly s předponami dodavatele po dlouhou dobu, kterou již nemusíme používat, ale Mozilla Developer Network stále doporučuje přidat -webkit předpona, protože podpora prohlížečů založených na Webkitu dosáhla pouze stability.