Přechody CSS3 vám umožňují animovat původní hodnotu vlastnosti CSS na novou hodnotu v průběhu času, čímž řídíte rychlost, jakou se hodnoty vlastnosti mění. Většina vlastností změní své hodnoty za 16 milisekund, takže doporučená výchozí doba přechodu je 200 ms.

Ke změně vlastností dochází, když dojde k určité události, která je popsána příslušnou pseudotřídou. Nejčastěji používanou pseudotřídou je:hover . Tato pseudotřída nefunguje dál mobilní zařízení jako je iPhone nebo Android. Univerzálním řešením, které funguje ve stolních i mobilních prohlížečích, by bylo zpracování událostí pomocí JavaScriptu (například přepínání tříd po kliknutí).

Přechody platí pro všechny prvky, stejně jako pro pseudoprvky :before a :after. Chcete-li nastavit všechny vlastnosti přechodu, vlastnost přechodu je obvykle zkratka.

Přechody CSS3 se nemusí vztahovat na všechny vlastnosti a jejich hodnoty. Podrobný seznam najdete na stránce.

Vytváření plynulých změn ve vlastnostech prvku

Podpora prohlížeče

TJ: 10.0
Firefox: 16,0, 4,0 -moz-
Chrome: 26.0, 4.0 -webkit-
safari: 6.1, 3.1 -webkit-
opera: 12,1, 11,6 -o-
iOS Safari: 7.1
Opera Mini: —
Prohlížeč Android: 4.4, 4.1 -webkit-
Chrome pro Android: 44

1. Název vlastnosti přechod-vlastnost

Obsahuje název vlastností CSS, na které bude efekt přechodu aplikován. Hodnota vlastnosti může obsahovat buď jednu vlastnost, nebo seznam vlastností oddělených čárkami. Při vytváření přechodu můžete použít počáteční i koncový stav prvku. Nemovitost se nedědí.

Vytvořené efekty by měly být nenápadné. Ne všechny vlastnosti vyžadují plynulou změnu v průběhu času, což souvisí s uživatelskou zkušeností. Například při najetí myší na odkaz chceme vidět okamžitou změnu barvy odkazu nebo barvy a stylu podtržení. Proto by se přechody měly používat pro ty vlastnosti, na které opravdu potřebujete upozornit.

Syntax

Div ( width: 100px; transition-property: width; ) div:hover ( width: 300px; )

2. Doba přechodu přechod-doba trvání

Určuje dobu, po kterou by měl přechod proběhnout. Pokud mají různé vlastnosti různé hodnoty přechodu, jsou odděleny čárkami. Pokud není zadána doba trvání přechodu, pak se při změně hodnot vlastností animace nevyskytne. Nemovitost se nedědí.

Syntax

Div ( přechod-trvání: 0,2 s; )

3. funkce časování přechodu

Tato vlastnost určuje časovou funkci, která popisuje rychlost, jakou objekt přechází z jedné hodnoty na druhou. Pokud pro prvek definujete více než jeden přechod, například barvu pozadí a polohu prvku, můžete pro každou vlastnost použít jinou funkci. Nemovitost se nedědí.

přechod-časování-funkce
Hodnoty:
ulehčit	Výchozí funkce, přechod začíná pomalu, rychle se zrychluje a na konci se zpomaluje. Odpovídá cubic-bezier(0,25,0,1,0,25,1) .
lineární	Přechod probíhá rovnoměrně po celou dobu, bez kolísání rychlosti. Odpovídá cubic-bezier(0,0,1,1) .
zklidnění	Přechod začíná pomalu a ke konci se postupně zrychluje. Odpovídá cubic-bezier(0,42,0,1,1) .
uvolnění	Přechod začíná rychle a ke konci se pomalu zpomaluje. Odpovídá cubic-bezier(0,0,0,58,1) .
easy-in-out	Přechod začíná pomalu a pomalu končí. Odpovídá cubic-bezier(0,42,0,0,58,1) .
cubicbezier(x1, y1, x2, y2)	Umožňuje ručně nastavit hodnoty od 0 do 1 pro křivku zrychlení. můžete vytvořit jakoukoli přechodovou cestu.
počáteční	Nastaví hodnotu vlastnosti na její výchozí hodnotu.
zdědit	Zdědí hodnotu vlastnosti z nadřazeného prvku.

Syntax

Div ( funkce časování přechodu: lineární; )

Pro realističtější animace použijte kubickou Bézierovu funkci:

Rýže. 1. Vlastní kubické Bézierovy funkce z easings.net

vlastní název	Hodnota funkce
easyInSine	cubic-bezier(0,47; 0; 0,745; 0,715)
easyOutSine	cubicbezier(0,39; 0,575; 0,565; 1)
easyInOutSine	kubický-bezier(0,445; 0,05; 0,55; 0,95)
easyInQuad	cubic-bezier(0,55; 0,085; 0,68; 0,53)
easyOutQuad	cubic-bezier(0,25; 0,46; 0,45; 0,94)
easyInOutQuad	kubický-bezier(0,455; 0,03; 0,515; 0,955)
easyInCubic	kubický-bezier(0,55; 0,055; 0,675; 0,19)
easyOutCubic	kubický-bezier(0,215; 0,61; 0,355; 1)
easyInOutCubic	cubic-bezier(0,645; 0,045; 0,355; 1)
easyInQuart	kubický-bezier(0,895; 0,03; 0,685; 0,22)
easyOutQuart	cubic-bezier(0,165; 0,84; 0,44; 1)
easyInOutQuart	cubicbezier(0,77; 0; 0,175; 1)
easyInQuint	kubický-bezier(0,755; 0,05; 0,855; 0,06)
easyOutQuint	cubicbezier(0,23; 1; 0,32; 1)
easyInOutQuint	cubic-bezier(0,86; 0; 0,07; 1)
easyInExpo	cubic-bezier(0,95; 0,05; 0,795; 0,035)
easyOutExpo	cubic-bezier(0,19; 1; 0,22; 1)
easyInOutExpo	cubicbezier(1, 0, 0, 1)
easyInCirc	cubicbezier(0,6; 0,04; 0,98; 0,335)
easyOutCirc	kubický-bezier(0,075; 0,82; 0,165; 1)
easyInOutCirc	kubický bezier(0,785; 0,135; 0,15; 0,86)
easyInBack	kubický-bezier(0,6; -0,28; 0,735; 0,045)
easyOutBack	kubický-bezier(0,175; 0,885; 0,32; 1,275)
easyInOutBack	kubický-bezier(0,68; -0,55; 0,265; 1,55)

4. přechod-zpoždění

Volitelná vlastnost, která vám umožní zajistit, aby ke změně vlastnosti nedošlo okamžitě, ale s určitým zpožděním. Neděděno.

Syntax

Div (zpoždění přechodu: 0,5 s; )

5. Shrnutí přechodu

Všechny vlastnosti zodpovědné za změnu vzhled prvek, lze kombinovat do jediné vlastnosti přechodu
přechod: přechod vlastnosti přechodu trvání přechodu funkce časování přechodu zpoždění;

Pokud použijeme výchozí hodnoty, pak zadání

Div(přechod: 1s;)

bude ekvivalentní

Div (přechod: všechny 1s lehkost 0s;)

6. Plynulý přechod několika vlastností

Pro prvek můžete určit několik po sobě jdoucích přechodů tak, že je uvedete oddělené čárkami. Každý přechod může být formalizován s vlastní časovou funkcí.

Div (přechod: pozadí 0,3 s plynulost, barva 0,2 s lineární;)

Div ( vlastnost přechodu: výška, šířka, barva pozadí; doba trvání přechodu: 3 s; funkce časování přechodu: náběh, náběh, lineární; )

7. Příklady přechodů pro různé vlastnosti

Umístěte kurzor myši na bloky, abyste viděli vlastnosti v akci.

CSS3 nám dává novou krásu a vybavení. V některých případech se již nemusíte uchýlit k použití flash a javascriptu k vytvoření nějakého neobvyklého efektu. Vlastnost přechodu CSS je ukázkovým příkladem jedné takové situace. Myslím, že každý zná pseudotřídu :hover. S tím se změňte hodnoty css vlastnosti prvku, když na něj najedete myší. Byl tam například šedý kvádr s černým nápisem, na který se vznášela myš a ten zčernal s bílým nápisem.

Zde je napsáno:

Blok ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; ) .blok:hover ( background-color:# 000000; barva:#ffffff; )

A takhle to vypadá:

Ukaž na mě

U bloku můžete také, když na něj najedete, kromě barvy pozadí a barvy textu změnit i šířku. Chcete-li to provést, napište kód CSS takto:

Blok1 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; ) .blok1:hover ( background-color:# 000000; barva:#ffffff; šířka:355px; )

V tomto případě by to vypadalo následovně:

Ukaž na mě

Všechno by bylo v pořádku, ale jak vidíte, vlastnosti mění své hodnoty příliš náhle, ve stejnou chvíli a nevypadá to moc hezky. Co dělat? Je to velmi jednoduché: použijte vlastnost CSS přechod.

O vlastnosti přechodu

Vlastnost přechodu umožňuje hladký přechod z jednoho stylu do druhého. Například barva bloku, když na něj najedete myší, se nezmění náhle, ale po určitou dobu. Přechod, mimochodem, přeložený do ruštiny znamená „přechod“. Nemovitost má následující vstup:

Div ( přechod:barva 1s 1s lineární; )

Místo uvedených hodnot lze samozřejmě použít i jiné hodnoty. Většina prohlížečů stále nerozpozná tuto vlastnost ve výchozí podobě, takže je třeba používat předpony.

Div ( přechod:barva 1s 1s lineární; -moz-přechod:barva 1s 1s lineární; -webkit-přechod:barva 1s 1s lineární; -o-přechod:barva 1s 1s lineární; )

V příkladech byla uvedena krátká verze záznamu, podrobná má následující podobu:

Div ( transition-property:color; transition-duration:1s; transition-delay:1s; transition-timing-function:linear; -moz-transition-property:color; -moz-transition-duration:1s; -moz-transition -delay:1s; -moz-transition-timing-function:linear; -webkit-transition-property:color; -webkit-transition-duration:1s; -webkit-transition-delay:1s; -webkit-transition-timing- function:linear; -o-transition-property:color; -o-transition-duration:1s; -o-transition-delay:1s; -o-transition-timing-function:linear; )

V přechodová vlastnost nastavuje vlastnost, na kterou se použije akce přechodu. Například: barva, barva pozadí, šířka, výška, vlevo, neprůhlednost, viditelnost a mnoho dalších. Můžete zadat více vlastností oddělených čárkami. Pokud chcete použít přechod na všechny možné vlastnosti najednou, nastavte vlastnost přechodu na všechny. V přechodné trvání uveďte čas, během kterého bude přechod proveden, v přechod-zpožděníčas, po kterém přechod začne. Funkce transition-timing-upřesňuje typ přechodu, pojďme se této vlastnosti věnovat podrobněji.

Přečtěte si více o funkci přechodu-časování

Vlastnictví přechod-časování-funkce určuje, jak se změní mezilehlé hodnoty během přechodu, jinými slovy, jak se změní rychlost přechodu v průběhu času zadaného ve vlastnosti transition-duration. Přechod může například začít rychle, ale nakonec se zpomalí nebo po celou dobu nezmění svou rychlost. Funkce přechodu-časování může mít následující hodnoty:

• lineární - Rychlost přechodu se nemění od začátku do konce. Odpovídá cubic-bezier(0,0,1,1).
• snadnost - pomalý začátek, pak zrychlení a zpomalení na konci. Ekvivalentní krychlový-bezier(0,25,0,1,0,25,1).
• easy-in - pomalý start. Ekvivalentní krychlový-bezier(0,42,0,1,1).
• easy-out - zpomalit na konci. Odpovídá cubic-bezier(0,0,0,58,1).
• easy-in-out - pomalý start a konec. Ekvivalentní krychlový-bezier(0,42,0,0,58,1).
• cubic-bezier(n,n,n,n) - umožňuje nastavit vlastní hodnoty od 0 do 1.

Najeďte myší na další blok a sami se přesvědčte, jak se přechod s konkrétní funkcí provádí.

Jak vidíte, v závislosti na tom, jakou hodnotu má vlastnost transition-timing-function, lze přechod provést zcela odlišnými způsoby. I když někdy tento rozdíl není příliš patrný, například pokud je přechod-doba trvání nastavena na malou dočasnou hodnotu nebo blok, pro který se efekt provádí, má malé rozměry a podobně.

Příklady použití vlastnosti přechodu

Abychom vám usnadnili zjištění, jak správně používat vlastnost přechodu, uvádíme několik příkladů. Začnu možná tím nejjednodušším. Pamatujete si blok s měnící se šířkou a barvou, když na něj najedete hned na začátku příspěvku? Udělejme nyní to samé, jen pomocí vlastnosti transition.
Příklad 1

Primer_1 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; kurzor:ukazatel; text-align:center; transition:all 1s linear; -moz-transition: all 1s linear; -webkit-transition:all 1s linear; -o-transition:all 1s linear; ) .primer_1:hover ( background-color:#000000; color:#ffffff; width:355px; )

Ukaž na mě

Použitý příklad lineární funkce, použiji to později v příspěvku. Samozřejmě můžete použít úplně jakýkoli. Vlastnost přechodu byla nastavena na all, což znamená, že všechny možné vlastnosti, jmenovitě barva pozadí, barva textu a šířka, změnily své hodnoty ve stejnou dobu a pomocí stejné funkce. Aby se každá vlastnost měnila jinak, musíte je napsat oddělené čárkami s různé hodnoty. Takhle:

Primer_1_1 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; kurzor:ukazatel; text-align:center; transition:background-color 1s linear, color 1s 1s náběh, šířka 1s 2s lehkost; -moz-přechod:barva pozadí 1s lineární, barva 1s 1s náběh, šířka 1s 2s lehkost; -webkit-transition:barva pozadí 1s lineární, barva 1s 1s -o-transition:background-color 1s linear, color 1s 1s easy-in-out, width 1s 2s easy; ) .primer_1_1:hover ( background-color:#000000; color :#ffffff;width:355px; )

Ukaž na mě

V tomto případě všechny vlastnosti postupně změnily své hodnoty, počínaje barvou pozadí a konče šířkou. Každá nemovitost má svou vlastní funkci.
Příklad 2
Vymýšleli jsme barvy a velikosti. Nyní udělejme blok, který zmizí v pohybu.

Primer_2 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; kurzor:ukazatel; text-align:center; opacity:1; transition:all 2s linear; - moz-transition:all 2s 0 linear; -webkit-transition:all 2s linear; -o-transition:all 2s linear; ) .primer_2:hover ( opacity:0; margin-left:50px; )

Ukaž na mě

S pomocí vlastnosti neprůhlednosti a blok vlevo na okraji se přesune a zmizí do dvou sekund.
Příklad 3
Další jednoduchý příklad. Text má tentokrát bílý stín, i když v tomto případě to vypadá spíše jako zvýraznění než stín, ale tak se ta vlastnost jmenuje.

Primer_3 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; kurzor:ukazatel; text-align:center; transition:text-shadow 1s linear; -moz- transition:text-shadow 1s 0 linear; -webkit-transition:text-shadow 1s linear; -o-transition:text-shadow 1s linear; ).primer_3:hover (text-shadow:0 0 15px #ffffff; )

Ukaž na mě

Implementovali jsme to pomocí vlastnosti text-shadow.
Příklad 4
Úkol si trochu zkomplikujeme, necháme blok roztočit.

Primer_4 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; kurzor:ukazatel; text-align:center; transition:transform 1,5s linear; -moz-transition - moz-transform: otočení (360 stupňů); -webkit-transform: otočení (360 stupňů); -o-transform: otočení (360 stupňů); )

Ukaž na mě

Souhlasíte, vypadá to dobře a ani nebudete hned hádat, že to bylo provedeno pouze pomocí CSS. V příkladu byla mimochodem použita další nová vlastnost transform. Mnoho prohlížečů jej čte pouze s předponami dodavatele. Všimněte si, že musí být také uvedeny v hodnotě vlastnosti přechodu. Chcete-li se dozvědět více o vlastnosti transform, nezapomeňte se přihlásit k odběru. Brzy mu bude, stejně jako mnoha dalším nemovitostem, věnován samostatný článek.
Příklad 5
Vlastnost přechodu CSS mimochodem funguje dobře v kombinaci s pseudotřídou :active. Zablokovat tento příklad by se měla zvýšit, když na něj kliknete a podržíte kurzor myši. Pojďme zkontrolovat?

Primer_5 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding-top:18px; height:38px; kurzor:ukazatel; text-align:center; transition:all 2s linear; -moz-transition:all 2s 0 linear; -webkit-transition:all 2s linear; -o-transition:all 2s linear; ) .primer_5:active ( width:375px; height:85px; )

stiskněte a podržte

K implementaci tohoto příkladu bylo nutné pouze zvětšit hodnoty šířky a výšky v bloku pomocí pseudotřídy :active.

Ve skutečnosti existuje mnoho způsobů, jak použít vlastnost přechodu CSS a jsem si jistý, že v budoucnu jich bude ještě více. Přinesl jsem jen to nejvíc jednoduché příklady demonstrovat přechod v akci. Mimochodem odkazy na mém blogu mění barvu, když na ně najedete myší. Myslím, že jsem z tebe dost unavený s šedým obdélníkem, ale podařilo se mi dokonale zobrazit vše, co jsem chtěl. V kombinaci s dalšími vlastnostmi a grafikou mohou přechody dělat pěkné věci. Snaž se!

Vlastnost CSS transition umožňuje nastavit všechny vlastnosti přechodového efektu (přechodu mezi dvěma stavy prvku) v jediné deklaraci.

Tato vlastnost je zkratkou pro následující vlastnosti (seznam se řídí pořadím, ve kterém jsou zadány hodnoty):

Podpora prohlížeče

Vlastnictví			Opera		IExplorer	okraj
přechod	26.0 4.0 -webkit-	16.0 4.0 -moz-	12.1 10.5 -Ó-	6.1 3.1 -webkit-	10.0	12.0

Syntaxe CSS:

přechod: "časování funkce trvání vlastnosti | počáteční | dědit"; /* je povoleno vypsat přechodový efekt zvlášť pro každou vlastnost v jedné deklaraci */ /* syntaxe by byla: vlastnost | trvání | funkce časování | zpoždění,..., majetek | trvání | funkce časování | zpoždění */ /* nejsou povoleny všechny hodnoty, ale musíte dodržet pořadí uvedené v horní části příkladu */ /* Poznámka: Pokud chcete zadat pouze zpoždění, budete muset zadat také trvání (0 s) */ /* tj. pokud chcete zadat zpoždění 4 sekundy, musíte napsat tento přechod: 0s 4s; */ přechod: šířka 2s náběh 100ms, výška 1s lineární 2s, pozadí 0s 4s; /* Viz příklad v dolní části stránky */

Syntaxe JavaScriptu:

Object.style.transition = "šířka 3s zmírnění 2s"

Hodnoty majetku

Význam	Popis
přechodová vlastnost	Určuje název vlastnosti CSS, pro kterou se má použít přechodový efekt. Výchozí hodnota je all.
přechodné trvání	Určuje, kolik sekund nebo milisekund trvá přechodový efekt.
přechod-časování-funkce	Používá se k popisu způsobu výpočtu mezilehlých hodnot Vlastnosti CSS, který je ovlivněn přechodovým efektem, při použití matematické funkce (kubická Bezierova křivka). To vám v podstatě umožňuje vytvořit „akcelerační“ křivku, aby se rychlost přechodu mohla měnit po dobu trvání přechodového efektu. Výchozí hodnota je lehkost.
přechod-zpoždění	Určuje, kdy začne přechodový efekt (funguje jako zpoždění pro začátek efektu). Výchozí hodnota je 0 sekund.
	Nastaví vlastnost na její výchozí hodnotu.
	Určuje, že hodnota je zděděna z nadřazeného prvku.

CSS verze

CSS3

Zděděno

Ne.

Animovaný

Ne.

Příklad použití

Příklad klouzavého vyhledávání v CSS pomocí selektoru atributů (se zadanou hodnotou) a generické vlastnosti přechodu:

Vyhledávání:

Přechod je plynulá změna vlastností prvku, když na něj najedete kurzorem myši. U pseudotřídy :hover je změna okamžitá, zatímco přechod umožňuje nastavit dobu trvání a způsob přechodu.

Začněme jednoduchým příkladem. Máme několik obrázků, každý by se měl otočit o malý úhel, když na něj najedete kurzorem (příklad 1).

Příklad 1: Použití přechodu

Jakmile najedeme kurzorem na libovolný obrázek, plynule se otočí o 15 stupňů doleva (obr. 1).

Rýže. 1. Plynulé otáčení obrazu

Ve stylech pro :hover nastavíme požadované změny prvků při hoveru. Samotný přechod je přidán do stylů prvku prostřednictvím vlastnosti přechodu. Má čtyři parametry – jednu nebo více vlastností, délku animace, časovou funkci a časovou prodlevu před animací.

Vlastnosti

Ve výchozím nastavení jsou všechny vlastnosti uvedené v :hover animované. Někdy je třeba některé vlastnosti animovat a některé ne. V tomto případě by všechny požadované vlastnosti měly být v přechodu odděleny čárkami.

Přechod: transformace, hranice 1s;

Délka animace

To je doba, po kterou bude pohyb trvat. Udává se jak v sekundách (1s, 0,5s), tak v milisekundách (100ms).

Zpoždění animace

Pohyb nemusí začít hned, na začátku je přijatelné přidat malou prodlevu, po uplynutí zadaného času se ihned spustí animace.

Funkce času

Animace může probíhat různými způsoby. Začněte například pomalu na začátku pohybu a na konci zrychlete, nebo naopak. Existuje mnoho možností a vytvářejí všechny druhy zajímavé efekty. Rychlost animace je řízena speciální funkcí propojující čas a pohyb. Takto to vypadá na grafu (obr. 2).

Rýže. 2. Typ časové funkce

Počáteční bod má souřadnice 0,0, 0,0, koncový bod - 1,0, 1,0, přičemž funkce podél osy y může tyto hodnoty překročit nahoru nebo dolů. V důsledku toho to bude vypadat, že se prvek nejprve pohybuje v opačném směru a poté v požadovaném směru. Můžete tak vytvořit efekt odrazu nebo setrvačnosti. Zde jsou nejoblíbenější hodnoty časových funkcí.

• snadnost - animace začíná pomalu, pak se zrychluje a ke konci pohybu se zase zpomaluje.
• easy-in - animace začíná pomalu a ke konci se zrychluje.
• Easy-out - animace začíná rychle, ke konci se zpomaluje.
• easy-in-out - animace začíná a končí pomalu.
• lineární - stejná rychlost od začátku do konce.

V příkladu 2 je přechod použit k hladkému vysunutí panelu zpoza levého okraje obrazovky, když na něj najedete kurzorem myši.

Příklad 2: Použití funkce času

V tomto příkladu je mnoho vlastností stylu, ale ty jsou určeny pouze k vytvoření požadovaného designu. Animace po přejetí myší se provádí pomocí dvou vlastností - přechod nastavuje parametry animace a vlevo je vlastnost, jejíž hodnota se plynule mění v čase (v tomto případě během jedné sekundy). Zpočátku je vlevo -320px a většina panelu je skryta za levým okrajem prohlížeče, viditelná je jen malá část. Pak se vlevo stane nula a tím se stane viditelným celý panel.

Ve stylech je povoleno přidat několik přechodů najednou s různými vlastnostmi a efekty, což vám umožňuje diverzifikovat přechody. Příklad 3 ukazuje, jak vytvořit tlačítko, které plynule změní barvu pozadí, ohraničení a popisek. V tomto případě je animace textu odlišná od animace ostatních částí.