HTML5 - přechody

Přechody patří do nové řady efektů, do kterých jsou začleněny HTML5 a to lze upravit pomocí CSS3Dříve musel tento typ efektů provádět Javascript pomocí jedné z mnoha dostupných knihoven a rámců (Mootools, Jquery atd.), Ale když byl zaveden nový standard, byly takové efekty začleněny, například přechody, animace, transformace …
Pomocí přechodů
Než uvidíme, jak použít přechod, musíme vědět, co to je. Víme, že když u vlastnosti aplikujeme změnu : vznášet se když najedete myší na prvek, okamžitě převezme styl přiřazený, když je myš nad ním, přechod není nic jiného než kontrola nad tím, jak bude tato změna provedena, tj. doba trvání změny, rychlost které se bude provádět, aby se dosáhlo účinku jako směsice mezi starým a novým stavem.
Můžeme tedy shrnout, že přechod je přechod z jednoho stavu do druhého v dokumentu HTML a všechny vlastnosti, s nimiž lze tuto změnu provést, na následujícím obrázku vidíme počáteční stav a konečný stav, přechod je to, co se stane Mezi oběma.
ZVĚTŠIT
Přechodové vlastnosti
Podívejme se na vlastnosti a atributy, které můžeme použít k provedení přechodu:

• zpoždění přechodu: Určuje zpoždění v jednotce času, po kterém se spustí aplikace efektu.
• doba přechodu: Určuje čas, po který má přechod proběhnout.
• přechodová vlastnost: Určuje, na kterou vlastnost se má přechod použít.
• funkce časování přechodu: Určuje způsob, jakým budou zpracovány mezilehlé hodnoty během provádění přechodu.
• přechod: Je to zkratka, pomocí které můžeme použít všechny vlastnosti přechodu v jediné deklaraci CSS. Lze to shrnout následovně: přechod:

To musíme zdůraznit zpoždění přechodu Y doba přechodu použijte jednotky času jako hodnoty, proto musí být zadáno pomocí s sekund nebo slečna milisekund.
Podívejme se na příklad, jak provést přechod pro prvek v HTML5, podívejme se na následující kód:

 Příklad
Existuje spousta různých druhů ovoce - existuje více než 500 odrůd banánů. V době, kdy přidáme nespočet druhů jablek, pomerančů a dalšího známého ovoce, máme před sebou tisíce možností.

Jak vidíme, implementovali jsme různé vlastnosti přechodového prvku pomocí předpony -webkit, to nás ujišťuje, že bude pro prohlížeče splněno Chrome Y Safari, pro jejich implementaci Firefox Y Opera musíme také zahrnout předpony -moz a -o.
Můžeme si také všimnout, že jsme nastavili zpoždění za 100 ms, což znamená, že bude mít malé zpoždění před zahájením přechodu, pak by celé trvání účinku mělo trvat 500 ms, což je stanoveno v doba trvání.
Podívejme se na obrázek se všemi fázemi efektu:
ZVĚTŠIT
Jak vidíme, přechod způsobí, že se efekt uplatní postupně během zadaného času.
Tímto dokončíme návod, jak aplikovat přechodový efekt na prvek v HTML5„Musíme pokračovat ve cvičení, dokud nebude přirozené umístit požadovaný kód tak, aby naše dokumenty a stránky dosáhly větší dynamiky.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod