Prechody CSS3 vám umožňujú animovať pôvodnú hodnotu vlastnosti CSS na novú hodnotu v priebehu času, čím riadite rýchlosť, akou sa hodnoty vlastnosti menia. Väčšina vlastností zmení svoje hodnoty za 16 milisekúnd, takže odporúčaný predvolený čas prechodu je 200 ms.

K zmene vlastností dochádza vtedy, keď nastane určitá udalosť, ktorá je popísaná príslušnou pseudotriedou. Najčastejšie používaná pseudotrieda je:hover . Táto pseudotrieda nefunguje ďalej mobilné zariadenia napríklad iPhone alebo Android. Univerzálnym riešením, ktoré funguje v desktopových a mobilných prehliadačoch, by bolo spracovanie udalostí pomocou JavaScriptu (napríklad prepínanie tried po kliknutí).

Prechody platia pre všetky prvky, ako aj pre pseudoprvky :before a :after. Ak chcete nastaviť všetky vlastnosti prechodu, vlastnosť prechodu je zvyčajne skrátená.

Prechody CSS3 sa nemusia vzťahovať na všetky vlastnosti a ich hodnoty. Podrobný zoznam nájdete na stránke.

Vytváranie plynulých zmien vo vlastnostiach prvku

Podpora prehliadača

IE: 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: —
Prehliadač Android: 4.4, 4.1 -webkit-
Chrome pre Android: 44

1. Názov vlastnosti prechod-vlastnosť

Obsahuje názov vlastností CSS, na ktoré sa použije prechodový efekt. Hodnota vlastnosti môže obsahovať buď jednu vlastnosť, alebo zoznam vlastností oddelených čiarkami. Pri vytváraní prechodu môžete použiť počiatočný aj koncový stav prvku. Nehnuteľnosť sa nededí.

Vytvorené efekty by mali byť nenápadné. Nie všetky vlastnosti vyžadujú plynulé zmeny v priebehu času, čo súvisí so skúsenosťami používateľa. Napríklad pri umiestnení kurzora myši nad odkaz chceme vidieť okamžitú zmenu farby odkazu alebo farby a štýlu podčiarknutia. Prechody by sa preto mali používať pre tie vlastnosti, na ktoré skutočne potrebujete upozorniť.

Syntax

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

2. Trvanie prechodu prechod-trvanie

Určuje čas, počas ktorého by sa mal prechod uskutočniť. Ak majú rôzne vlastnosti rôzne hodnoty prechodu, sú oddelené čiarkami. Ak nie je zadané trvanie prechodu, animácia sa pri zmene hodnôt vlastností nevyskytne. Nehnuteľnosť sa nededí.

Syntax

Div ( trvanie prechodu: 0,2 s; )

3. funkcia prechodu-časovania

Vlastnosť určuje časovú funkciu, ktorá popisuje rýchlosť, ktorou objekt prechádza z jednej hodnoty na druhú. Ak pre prvok definujete viac ako jeden prechod, napríklad farbu pozadia a polohu prvku, pre každú vlastnosť môžete použiť inú funkciu. Nehnuteľnosť sa nededí.

prechod-časovanie-funkcia
Hodnoty:
ľahkosť	Predvolená funkcia, prechod začína pomaly, rýchlo sa zrýchľuje a na konci sa spomalí. Zodpovedá cubic-bezier(0,25,0,1,0,25,1) .
lineárne	Prechod prebieha rovnomerne počas celého času, bez kolísania rýchlosti. Zodpovedá cubic-bezier(0,0,1,1) .
uvoľnenie	Prechod začína pomaly a na konci sa postupne zrýchľuje. Zodpovedá cubic-bezier(0,42,0,1,1) .
uvoľnenie	Prechod začína rýchlo a na konci sa pomaly spomaľuje. Zodpovedá cubic-bezier(0,0,0,58,1) .
easy-in-out	Prechod začína pomaly a pomaly končí. Zodpovedá cubic-bezier(0,42,0,0,58,1) .
cubicbezier(x1, y1, x2, y2)	Umožňuje manuálne nastaviť hodnoty od 0 do 1 pre krivku zrýchlenia. môžete vytvoriť akúkoľvek prechodovú cestu.
počiatočné	Nastaví hodnotu vlastnosti na jej predvolenú hodnotu.
dediť	Zdedí hodnotu vlastnosti z nadradeného prvku.

Syntax

Div ( funkcia časovania prechodu: lineárna; )

Pre realistickejšie animácie použite kubickú Bézierovu funkciu:

Ryža. 1. Vlastné kubické Bézierove funkcie z easings.net

vlastný názov	Hodnota funkcie
easyInSine	kubický-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	kubický bezier (0,55; 0,085; 0,68; 0,53)
easyOutQuad	kubický 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	kubický bezier (0,645; 0,045; 0,355; 1)
easyInQuart	kubický bezier (0,895; 0,03; 0,685; 0,22)
easyOutQuart	kubický 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	kubický-bezier (0,86; 0; 0,07; 1)
easyInExpo	kubický-bezier (0,95; 0,05; 0,795; 0,035)
easyOutExpo	kubický-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. prechod-oneskorenie

Voliteľná vlastnosť, ktorá vám umožňuje zabezpečiť, aby zmena vlastnosti nenastala okamžite, ale s určitým oneskorením. Nezdedené.

Syntax

Div (oneskorenie prechodu: 0,5 s; )

5. Zhrnutie prechodu

Všetky vlastnosti zodpovedné za zmenu vzhľad prvok, možno spojiť do jedinej vlastnosti prechodu
prechod: prechod-vlastnosť prechod-trvanie prechodu-časovanie-funkcia prechod-oneskorenie;

Ak použijeme predvolené hodnoty, potom vstup

Div(prechod: 1s;)

bude ekvivalentná

Div (prechod: všetky 1 s ľahkosťou 0 s;)

6. Plynulý prechod viacerých vlastností

Pre prvok môžete zadať niekoľko po sebe idúcich prechodov tak, že ich uvediete oddelené čiarkami. Každý prechod môže byť formalizovaný s vlastnou časovou funkciou.

Div (prechod: pozadie 0,3 s ľahkosť, farba 0,2 s lineárna;)

Div ( vlastnosť prechodu: výška, šírka, farba pozadia; trvanie prechodu: 3 s; funkcia načasovania prechodu: nabehnutie, uľahčenie, lineárne; )

7. Príklady prechodov pre rôzne vlastnosti

Umiestnite kurzor myši na bloky, aby ste videli vlastnosti v akcii.

CSS3 nám dáva novú krásu a vybavenie. V niektorých prípadoch sa už nemusíte uchýliť k používaniu flashu a javascriptu na vytvorenie nejakého neobvyklého efektu. Vlastnosť prechodu CSS je ukážkovým príkladom takejto situácie. Myslím, že každý pozná pseudotriedu :hover. S tým sa zmeňte hodnoty css vlastnosti prvku, keď naň umiestnite kurzor myši. Bol tam napríklad sivý blok s čiernym nápisom, ktorý sa nad ním vznášal myšou a ten sa zmenil na čierny s bielym nápisom.

Tu je napísané:

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

A takto to vyzerá:

Ukáž na mňa

Môžete tiež urobiť blok, keď naň prejdete, okrem farby pozadia a farby textu zmeníte aj šírku. Ak to chcete urobiť, napíš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; farba:#ffffff; šírka:355px; )

V tomto prípade by to vyzeralo takto:

Ukáž na mňa

Všetko by bolo v poriadku, ale ako vidíte, vlastnosti menia svoje hodnoty príliš náhle, v rovnakom okamihu a nevyzerá to veľmi pekne. Čo robiť? Je to veľmi jednoduché: použite vlastnosť CSS prechod.

O vlastnosti prechodu

Vlastnosť prechodu umožňuje hladký prechod z jedného štýlu do druhého. Napríklad farba bloku, keď naň prejdete myšou, sa nezmení náhle, ale za určitý čas. Prechod, mimochodom, preložený do ruštiny znamená "prechod". Nehnuteľnosť má nasledujúci vstup:

Div ( prechod: farba 1 s 1 s lineárny; )

Prirodzene, namiesto uvedených hodnôt je možné použiť iné hodnoty. Väčšina prehliadačov stále nepozná túto vlastnosť v jej predvolenom tvare, takže je potrebné použiť predpony.

Div ( prechod:farba 1s 1s lineárny; -moz-prechod:farba 1s 1s lineárny; -webkit-prechod:farba 1s 1s lineárny; -o-prechod:farba 1s 1s lineárny; )

V príkladoch bola uvedená krátka verzia záznamu, podrobná má nasledujúcu podobu:

Div ( prechod-vlastnosť:farba; trvanie-prechodu:1s; oneskorenie-prechodu:1s; funkcia-časovania-prechodu:lineárna; -moz-vlastnosť-prechodu:farba; -moz-trvanie-prechodu:1s; -moz-prechod -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; )

AT prechodová vlastnosť nastavuje vlastnosť, na ktorú sa použije akcia prechodu. Napríklad: farba, farba pozadia, šírka, výška, vľavo, nepriehľadnosť, viditeľnosť a mnoho ďalších. Môžete zadať viacero vlastností oddelených čiarkami. Ak chcete použiť prechod na všetky možné vlastnosti naraz, nastavte vlastnosť prechodu na všetky. AT prechodné trvanie uveďte čas, počas ktorého sa prechod uskutoční, v prechod-oneskoreniečas, po ktorom sa prechod začne. Funkcia prechodu-časovania určuje typ prechodu, poďme sa venovať tejto vlastnosti podrobnejšie.

Získajte viac informácií o funkcii načasovania prechodu

Nehnuteľnosť prechod-časovanie-funkcia určuje, ako sa zmenia medzihodnoty počas prechodu, inými slovami, ako sa zmení rýchlosť prechodu v priebehu času špecifikovaného vo vlastnosti prechodu-trvanie. Napríklad prechod môže začať rýchlo, ale nakoniec sa spomalí alebo nezmení svoju rýchlosť po celý čas. Funkcia prechodu-časovania môže mať nasledujúce hodnoty:

• lineárne - Rýchlosť prechodu sa nemení od začiatku do konca. Ekvivalent kubic-bezier(0,0,1,1).
• ľahkosť - pomalý štart, potom zrýchliť a na konci spomaliť. Ekvivalent kubických-bezierov (0,25, 0,1, 0,25, 1).
• easy-in - pomalý štart. Ekvivalent kubického-beziera (0,42,0,1,1).
• easy-out - na konci spomaľte. Ekvivalent kubických-bezierov (0,0,0,58,1).
• easy-in-out - pomalý štart a koniec. Ekvivalent kubického-beziera (0,42,0,0,58,1).
• cubic-bezier(n,n,n,n) - umožňuje nastaviť vlastné hodnoty od 0 do 1.

Umiestnite kurzor myši na ďalší blok a sami uvidíte, ako sa prechod vykonáva pomocou konkrétnej funkcie.

Ako vidíte, v závislosti od toho, akú hodnotu má vlastnosť prechodu-časovania-funkcie, možno prechod vykonať úplne odlišnými spôsobmi. Aj keď niekedy tento rozdiel nie je príliš viditeľný, napríklad ak je prechod-trvanie nastavený na malú dočasnú hodnotu alebo blok, pre ktorý sa efekt vykonáva, má malé rozmery atď.

Príklady použitia vlastnosti prechodu

Aby ste mohli ľahšie zistiť, ako správne používať vlastnosť prechodu, uvádzame niekoľko príkladov. Začnem možno tým najjednoduchším. Pamätáte si na blok s meniacou sa šírkou a farbou, keď naň nabehnete na samom začiatku príspevku? Urobme teraz to isté, len pomocou vlastnosti prechodu.
Prí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; )

Ukáž na mňa

Použitý príklad lineárna funkcia, použijem neskôr v príspevku. Samozrejme, môžete použiť úplne akýkoľvek. Vlastnosť prechodu bola nastavená na všetky, čo znamená, že všetky možné vlastnosti, menovite farba pozadia, farba textu a šírka, zmenili svoje hodnoty v rovnakom čase a pomocou rovnakej funkcie. Aby sa každá vlastnosť zmenila inak, musíte ich napísať oddelené čiarkami s rôzne hodnoty. Páči sa ti to:

Primer_1_1 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:background-color 1s linear, color 1s 1s uvoľnenie, šírka 1 s 2 s ľahkosť; -moz-prechod:farba pozadia 1s lineárna, farba 1s 1s uvoľnenie von, šírka 1s 2s ľahké; -webkit-prechod:farba pozadia 1s lineárna, farba 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; )

Ukáž na mňa

V tomto prípade všetky vlastnosti postupne zmenili svoje hodnoty, počnúc farbou pozadia a končiac šírkou. Každá nehnuteľnosť má svoju funkciu.
Príklad 2
Zisťovali sme farby a veľkosti. Teraz urobme blok, ktorý zmizne v pohybe.

Primer_2 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; kurzor:pointer; 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; )

Ukáž na mňa

S pomocou vlastnosti nepriehľadnosti a ľavý okrajový blok sa presunie a zmizne do dvoch sekúnd.
Príklad 3
Ďalší jednoduchý príklad. Text má tentokrát biely tieň, aj keď v tomto prípade to vyzerá skôr ako zvýraznenie ako tieň, ale tak sa tá vlastnosť volá.

Primer_3 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; 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; )

Ukáž na mňa

Implementovali sme to pomocou vlastnosti text-shadow.
Príklad 4
Trochu si úlohu skomplikujeme, nech sa blok roztočí.

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čenie (360 stupňov); -webkit-transform: otočenie (360 stupňov); -o-transform: otočenie (360 stupňov); )

Ukáž na mňa

Súhlasíte, vyzerá to dobre a ani nebudete hneď hádať, že to bolo urobené iba pomocou CSS. Mimochodom, v príklade bola použitá ďalšia nová vlastnosť transformácie. Mnoho prehliadačov ho číta iba s predponami dodávateľa. Všimnite si, že musia byť špecifikované aj v hodnote vlastnosti prechodu. Ak sa chcete dozvedieť viac o vlastnosti transform, nezabudnite sa prihlásiť na odber. Čoskoro jej, ako aj mnohým ďalším nehnuteľnostiam, bude venovaný samostatný článok.
Príklad 5
Vlastnosť prechodu CSS, mimochodom, funguje dobre v kombinácii s pseudotriedou :active. Zablokovať tento príklad by sa mala zvýšiť, keď na ňu kliknete a podržíte kurzor myši. Skontrolujme to?

Primer_5 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding-top:18px; height:38px; cursor:pointer; 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; )

stlačte a podržte

Na implementáciu tohto príkladu bolo potrebné iba zväčšiť hodnoty šírky a výšky v bloku pomocou pseudotriedy :active.

V skutočnosti existuje veľa spôsobov, ako použiť vlastnosť prechodu CSS a som si istý, že v budúcnosti ich bude ešte viac. Doniesol som len to naj jednoduché príklady demonštrovať prechod v akcii. Mimochodom, odkazy na mojom blogu menia farbu, keď na ne nabehnete myšou. Myslím, že som z teba dosť unavený so sivým obdĺžnikom, ale podarilo sa mi dokonale zobraziť všetko, čo som chcel. V kombinácii s inými vlastnosťami a grafikou môžu prechody robiť pekné veci. Skúste!

Vlastnosť prechodu CSS umožňuje nastaviť všetky vlastnosti prechodového efektu (prechodu medzi dvoma stavmi prvku) v jednej deklarácii.

Táto vlastnosť je skratkou pre nasledujúce vlastnosti (zoznam je v poradí, v akom sú špecifikované hodnoty):

Podpora prehliadača

Nehnuteľnosť			Opera		IExplorer	hrana
prechod	26.0 4.0 -webkit-	16.0 4.0 -moz-	12.1 10.5 -o-	6.1 3.1 -webkit-	10.0	12.0

Syntax CSS:

prechod: "čas trvania vlastnosti oneskorenie funkcie | počiatočné | zdediť"; /* je dovolené uvádzať prechodový efekt samostatne pre každú vlastnosť v jednej deklarácii */ /* syntax by bola: vlastnosť | trvanie | funkcia časovania | meškanie,..., nehnuteľnosť | trvanie | funkcia časovania | oneskorenie */ /* nie sú povolené všetky hodnoty, ale musíte postupovať podľa poradia uvedeného v hornej časti príkladu */ /* všimnite si, že ak chcete zadať iba oneskorenie, budete musieť zadať aj trvanie (0 s) */ /* t.j. ak chcete zadať oneskorenie 4 sekundy, musíte napísať tento prechod: 0 s 4 s; */ prechod: šírka 2s nábeh 100ms, výška 1s lineárny 2s, pozadie 0s 4s; /* Pozri príklad v spodnej časti stránky */

Syntax JavaScriptu:

Object.style.transition = "šírka 3s uvoľnenie 2s"

Hodnoty majetku

Význam	Popis
prechodová vlastnosť	Určuje názov vlastnosti CSS, pre ktorú sa má použiť prechodový efekt. Predvolená hodnota je all.
prechodné trvanie	Určuje, koľko sekúnd alebo milisekúnd trvá prechodový efekt.
prechod-časovanie-funkcia	Používa sa na opis spôsobu, akým sa vypočítavajú medzihodnoty CSS vlastnosti, ktorý je ovplyvnený prechodovým efektom, pričom sa používa matematická funkcia (kubická Bezierova krivka). To vám v podstate umožňuje vytvoriť krivku „zrýchľovania“, takže rýchlosť prechodu sa môže meniť počas trvania prechodového efektu. Predvolená hodnota je ľahkosť.
prechod-oneskorenie	Určuje, kedy sa začne prechodový efekt (funguje ako oneskorenie začiatku efektu). Predvolená hodnota je 0 sekúnd.
	Nastaví vlastnosť na jej predvolenú hodnotu.
	Určuje, že hodnota sa zdedí z nadradeného prvku.

CSS verzia

CSS3

Zdedené

Nie

Animované

Nie

Príklad použitia

Príklad posuvného vyhľadávania v CSS pomocou selektora atribútu (so zadanou hodnotou) a generickej vlastnosti prechodu:

Vyhľadávanie:

Prechod je plynulá zmena vlastností prvku, keď naň prejdete kurzorom myši. S pseudotriedou :hover je zmena okamžitá, zatiaľ čo prechod umožňuje nastaviť trvanie a spôsob prechodu.

Začnime jednoduchým príkladom. Máme niekoľko obrázkov, každý z nich by sa mal otočiť o malý uhol, keď nad ním umiestnite kurzor (príklad 1).

Príklad 1: Aplikácia prechodu

Akonáhle prejdeme kurzorom na ľubovoľný obrázok, plynulo sa otočí o 15 stupňov doľava (obr. 1).

Ryža. 1. Plynulé otáčanie obrazu

V štýloch pre :hover nastavíme požadované zmeny prvkov pri prechode. Samotný prechod sa pridá k štýlom prvku prostredníctvom vlastnosti prechodu. Má štyri parametre – jednu alebo viac vlastností, trvanie animácie, časovú funkciu a časové oneskorenie pred animáciou.

Vlastnosti

V predvolenom nastavení sú všetky vlastnosti špecifikované v :hover animované. Niekedy je potrebné niektoré vlastnosti animovať a niektoré nie. V tomto prípade by mali byť všetky požadované vlastnosti v prechode oddelené čiarkou.

Prechod: transformácia, hranica 1s;

Trvanie animácie

Toto je čas, počas ktorého bude pohyb trvať. Udáva sa v sekundách (1 s, 0,5 s) aj v milisekúndách (100 ms).

Oneskorenie animácie

Pohyb nemusí začať hneď, na začiatku je prijateľné pridať malé oneskorenie, po uplynutí určeného času sa okamžite spustí animácia.

Funkcia času

Animácia môže prebiehať rôznymi spôsobmi. Začnite napríklad pomaly na začiatku pohybu a na konci zrýchlite, alebo naopak. Existuje veľa možností a vytvárajú všetky druhy zaujímavé efekty. Rýchlosť animácie je riadená špeciálnou funkciou spájajúcou čas a pohyb. Takto to vyzerá na grafe (obr. 2).

Ryža. 2. Typ časovej funkcie

Počiatočný bod má súradnice 0,0, 0,0, koncový bod - 1,0, 1,0, pričom funkcia pozdĺž zvislej osi môže tieto hodnoty prekročiť nahor alebo nadol. V dôsledku toho to bude vyzerať tak, že sa prvok najprv pohne opačným smerom a potom v požadovanom smere. Môžete tak vytvoriť efekt odrazu alebo zotrvačnosti. Tu sú najobľúbenejšie hodnoty časových funkcií.

• ľahkosť - animácia sa spustí pomaly, potom sa zrýchli a ku koncu pohybu opäť spomalí.
• easy-in - animácia začína pomaly a ku koncu sa zrýchľuje.
• easy-out - animácia sa spustí rýchlo, ku koncu sa spomalí.
• easy-in-out - animácia začína a končí pomaly.
• lineárne - rovnaká rýchlosť od začiatku do konca.

V príklade 2 sa prechod používa na plynulé vysúvanie panela spoza ľavého okraja obrazovky, keď nad ním umiestnite kurzor myši.

Príklad 2: Použitie funkcie času

V tomto príklade je veľa vlastností štýlu, ale sú určené len na vytvorenie požadovaného dizajnu. Animácia po prejdení myšou sa vykonáva pomocou dvoch vlastností - prechod nastavuje parametre animácie a vľavo je vlastnosť, ktorej hodnota sa plynule mení v čase (v tomto prípade v priebehu jednej sekundy). Na začiatku je vľavo -320px a väčšina panela je skrytá za ľavým okrajom prehliadača, viditeľná je len malá časť. Potom sa vľavo zmení na nulu a tým sa stane viditeľný celý panel.

V štýloch je povolené pridať niekoľko prechodov naraz s rôznymi vlastnosťami a efektmi, čo vám umožňuje diverzifikovať prechody. Príklad 3 ukazuje, ako vytvoriť tlačidlo, ktoré plynule zmení farbu pozadia, orámovanie a štítok. V tomto prípade je animácia textu odlišná od animácie ostatných častí.