Jak implementovat přechod CSS: Animace jsou hotové správně



Tento článek vám poskytne podrobné a komplexní znalosti přechodů CSS a jak k nim můžete přidat animace.

Animace na webové stránce mohou přilákat více uživatelů. Zeptejte se sami sebe - pokud byste viděli webovou stránku, která má docela dost animací, nechtěli byste prozkoumat více? Nyní s přechody CSS můžete svou práci oživit několika skvělými animacemi. A pamatujte, že je třeba to udělat správně. Pojďme prozkoumat svět přechodů CSS v následujícím pořadí:

Proč CSS Transitions?

Pojďme si vzít příklad. Pokud byste chtěli změnit barvu prvku z bílé na modrou, je tato změna téměř okamžitá. Pro animovanější efekt můžete tuto změnu provést postupně. Vypadá to také docela vizuálně přitažlivě. Povolením přechodů CSS můžete přizpůsobit způsob, jakým ke změnám dochází. Můžete definovat, jak ke změnám prvků dochází v konkrétních časových intervalech, které sledují křivku zrychlení.





Přechody CSS umožňují definovat změny pro prvky, konkrétní časové intervaly, rychlost křivky zrychlení a mnoho dalšího. To vše můžete udělat bez použití Flash nebo JavaScript .

Pro lepší pochopení můžete použít následující obrázek:



Přechod CSSNa obrázku výše se prvek HTML změní z červené na modrou během jedné sekundy. Během přechodu uvidíte také mezilehlou barvu. Pokud nebudete používat přechody CSS, všimnete si, že změna barvy z červené na modrou je okamžitá - střední barva se nezobrazí. U přechodů CSS si všimnete animovaného efektu, když se prvky HTML mění ze starého stavu na nový.

Přechodná vlastnost

Vlastnost shorthand transition můžete použít k ovládání přechodů CSS. Použití této zkratky je nejen snadné, ale může se také vyhnout nesynchronizovaným parametrům, jejichž ladění v CSS může být docela frustrující.

Přechodová vlastnost určuje vlastnosti CSS, na které chcete efekt přechodu. Animovány jsou pouze tyto vlastnosti CSS.



Syntax:

přechod:

Jako začátečník se při používání zkratky můžete setkat s určitými obtížemi. Pokud si myslíte, že používání zkratky je pro vás teď trochu složité, můžete určit vlastnosti přechodu samostatně. U prvku HTML můžete určit vlastnosti přechodu jeden po druhém, jak je znázorněno v následujícím příkladu:

metoda tostring () java
div {width: 100px height: 100px background: lightblue transition-property: width transition-duration: 2s transition-timing-function: linear transition-delay: 1s} div: hover {width: 300px}

Umístěte ukazatel myši nad krabici

Ve výše uvedeném příkladu jsme specifikovali vlastnosti (přechodová vlastnost, přechodová doba, přechodová časovací funkce a přechodová prodleva) a jejich hodnoty zvlášť. O těchto vlastnostech přechodu se brzy dozvíme.

Co je třeba specifikovat?

Existují primárně dvě věci, které musíte zadat, abyste vytvořili přechody CSS: vlastnost CSS, ke které chcete přidat efekt, a doba trvání tohoto efektu.Musíte mít na paměti jednu věc - pokud neurčíte dobu trvání, přechod bude mít výchozí hodnotu 0 , a nebude to mít žádný účinek.

Uvažujme příklad:

Níže uvedený kód definuje přechodový efekt vlastnosti width po dobu pěti sekund.

div {width: 100px height: 100px background: blue transition: width 5s} div: hover {width: 600px}

Přesunutím kurzoru nad prvek div výše zobrazíte přechodový efekt.

Ve výše uvedeném kódu uvidíte, že když podržíte kurzor nad modrým polem, modré pole postupně zvětší svou šířku po dobu pěti sekund. Také si všimnete, že když odstraníte kurzor z modrého pole, modré pole se vrátí do původní velikosti postupně (ne okamžitě). Můžete také změnit hodnoty šířky a doby trvání, abyste viděli, jak tato vlastnost přechodu ovlivní prvek HTML.

Můžete také přidat přechodový efekt do více než jedné vlastnosti. Můžete to udělat pomocí čárek k oddělení vlastností. Uvažujme příklad:

V níže uvedeném kódu je vlastnost přechodu zadána pro šířku, výšku a transformaci.

div {odsazení: 15px šířka: 150px výška: 100px pozadí: zelený přechod: šířka 2s, výška 2s, transformace 2s} div: vznášet se {šířka: 300px výška: 200px transformace: otočit (360deg)} Ahoj světe 

(Hover Over Me)

Ve výše uvedeném příkladu uvidíte, jak se zelené pole pohybuje, když na něj umístíte ukazatel myši.

qtp vs selen, což je lepší

Zadali jsme pouze vlastnost a dobu trvání. Podívejme se na další parametry s různými příklady.

Vlastnost funkce Transition-timing-function

Tato vlastnost definuje křivku rychlosti pro přechodový efekt. Může nabývat následujících hodnot:

  • Snadná hodnota: Toto je výchozí hodnota, kde je efekt na začátku pomalý, pak rychlejší a končí pomalu.
  • Lineární hodnota: Tento efekt nemění rychlost přechodu - udržuje rychlost konzistentní od začátku do konce.
  • Hodnota pro usnadnění: Tento efekt začíná pomalu.
  • Hodnota pro uvolnění: Tento efekt má pomalý konec.
  • Hodnota Ease-in-out: Tento efekt má pomalý i pomalý start.
  • Kubická-Bézierova hodnota (n, n, n, n): Ve funkci kubický-bezier můžete zadat vlastní sadu hodnot.

Níže uvedený kód ukazuje přechodové efekty pro lineární hodnoty, snadnost, snadnost, snadnost a snadnost vstupu.

div {šířka: 100 pixelů výška: 100 pixelů pozadí: růžový přechod: šířka 2 s} # div1 {přechod-časování-funkce: lineární} # div2 {přechod-časování-funkce: snadnost} # div3 {přechod-časování-funkce: časování } # div4 {transition-timing-function: easier-out} # div5 {transition-timing-function: easier-in-out} div: hover {width: 300px}

Umístěte ukazatel myši nad prvky div níže

lineární
ulehčit
ulehčení
uvolnění
bezstarostnost

Vlastnost Transition-Delay

Někdy chcete, aby se animace objevila po určité době. Vlastnost přechodového zpoždění umožňuje určit zpoždění přechodového efektu. Můžete zadat zpoždění v sekundách.

Uveďme si příklad, abychom viděli zpoždění přechodového efektu:

div {width: 100px height: 100px background: yellow transition: width 3s transition-delay: 1s} div: hover {width: 300px}

Umístěte ukazatel myši nad prvek div níže

Poznámka: Můžete pozorovat, že 1 sekundová prodleva před spuštěním efektu

Když ve výše uvedeném kódu najedete kurzorem na žluté pole, všimnete si (na jednu sekundu), že neexistuje žádný účinek. Po jedné vteřině si účinek všimnete.

Tímto se dostáváme na konec tohoto článku Přechody CSS. Nyní můžete na své webové stránky přidávat animace. Vyzkoušejte tyto příklady.

Podívejte se na naše který přichází s živým tréninkem vedeným instruktorem a zkušenostmi z reálného projektu. Toto školení vám umožní ovládat dovednosti práce s webovými technologiemi typu back-end a front-end. Zahrnuje školení na Web Development, jQuery, Angular, NodeJS, ExpressJS a MongoDB.

Máte na nás dotaz? Uveďte to prosím v sekci komentářů blogu „CSS Transition“ a my se vám ozveme.