CSS3 teória a príklady - vlastnosť transition
Martin Valent / 16. 11. 2010, 00:00
Animovaná zmena prvku stránky pomocou transition, v článku je popísaná teória vlastnosti, možnosti zápisu a dva jednoduché príklady.
Teória:
Vlastnosť transition, v Slovenčine prechod, je častou vlastnosťou, ktorá sa využíva pri animácii zmeny prvku na stránke. Táto zmena sa prejavuje postupným prechodom z predošlých vlastností selektoru do nových, podľa nastaveného času trvania. Prechod závisí od nastaveného štýlu, nastavujú sa rôzne rýchlosti nábehu a dobehu. Priebeh prechodu ide po Bézierovej krivke, ktorá je buď zapísaná súradnicami alebo vopred pripravenými hodnotami (ease, linear,...).
Štandardným zápisom vlastností prechodu transition je:
transition-property - určuje konkrétnu vlastnosť selektoru, ktorá sa bude meniť. Základná hodnota je všetko (all), ale je možné použiť hodnotu all: transition-property: all;
Pri viacprvkovej zmene vlastností, sa používa zápis oddelený čiarkou (v tomto zápise sa nepoužíva hodnota all). transition-property: left, top, width;
transition-duration - určuje čas, za ktorý sa má prechod vykonať. Pokiaľ sú hodnoty vo vlastnosti transition-property delené čiarkou, tak jednotlivé časy pre každú hodnotu budú tiež delené čiarkou: transition-duration: 0.5s, 1s, 650ms; transition-timing-function - určuje funkciu (štýl) prechodu, respektíve rýchlosť trvania nábehu/dobehu. Základná hodnota je ease. Delí sa čiarkou pre jednotlivé hodnoty. Obsahuje hodnoty: ease - nelineárny prechod, základná hodnota, so zrýchleným nábehom, ktorý sa nelineárne spomaľuje, v grafe priebehu by sa to dalo znázorniť ako mierne zaoblená krivka na konci. linear - určuje lineárny prechod, teda rovnomerný (rýchlosť nábehu a dobehu je rovnaká). ease-in - nelineárny prechod, rýchlosť nábehu je pomalá a pomaličky sa rozbieha až k rýchlemu dobehu. ease-out - nelineárny prechod, rýchlosť nábehu je rýchla a rýchlosť dobehu sa spomaľuje. ease-in-out - nelineárny prechod, rýchlosť nábehu a dobehu je pomalá, lenže medzi týmito behmi sa zrýchľuje (spojenie ease-in a ease-out). cubic-bezier(P1x,P1y,P2x,P2y) - nelineárny prechod, rýchlosť nábehov určujeme pomocou Bézierovej krivky. Napríklad: transition-timing-function: linear, linear, linear;
transition-delay - určuje čas, ktorý má čakať (meškať), a tak až vykonať prechod, možné deliť čiarkou pre určenie času predchádzajúcim hodnotám.
Napríklad:
transition-delay: 0.5s, 1s, 2s;
Pozor! - usporiadanie viacerých hodnôt vo vlastnosti usporiadajte podľa spúšťania (delay). To znamená, že hodnoty v delay sa musia stupňovať alebo ostať rovnaké.
ANO (0.5s, 1s, 2s) (0.5s, 1s, 1s) (1s, 5s, 7s)(2s, 2s, 2s)
NIE (3s, 1s, 2s)(5s, 3s, 2s)(0.5s, 8s, 2s)
Rada: zápis 0.5 má kratší ekvivalent .5 Rada: zlý zápis (3s,1s,2s) bude fungovať ako (3s, 3s, 3s) funkčný ekvivalent (3s) Pozor! - Browserver, ktorý nepodporuje transition vynechá prechody a daná časť sa sprava bez tejto vlastnosti, napríklad, namiesto postupnej zmeny farby sa farba zmení v okamihu. Pozor! - Pri vlastnosti umiestnenia (top, left,.. margin, padding...) s inou hodnotou, ako bola predošlá, prvok sa na stránke postupne presunie na určené miesto. Pri chýbajúcej vlastnosti v predošlom selektore, sa berie do úvahy defaultná (základná hodnota) - x0 y0. Pozor! - Pri prechode medzi selektormi, sa snažte aby selektor pred zmenou (pôvodný), mal definované rovnaké vlastnosti ako po prechode. To znamená, napríklad, že farba pozadia v selektore elementu div musí mať definovanú farbu, z ktorej sa vytvorí prechod do selektoru elementu so pseudotriedou: div:hover s novou farbou pozadia. Keby ste vynechali túto vlastnosť background-color:; v div, ale v div.hover by ste ju zadali, môžu vznikať nežiaduce problémy. Skrátený zápis vlastnosti transition - -webkit-transition: <property> <duration> <timing-funciton> <delay>. Napríklad výsledok skráteného zápisu: webkit-transition: width 3s linear 1s;
Podpora browserverov je problémová, hlavne u nového IE. Popisovanú vlastnosť začali podporovať tieto verzie: Firefox 4.0, Chrome 1, Opera 10.5 a Safari 3.2. Pre každý prehliadavač je podporovaný zápis transition, a to s predponou:
-webkit-transition určené pre jadro webkit (chrome, safari, ...).
-moz-transition určené pre jadro gecko (Mozilla).
-o-transition určené pre Operu.
Príkladné využitie prechodov: pri animovanom menu... pri zväčšení obrázka v galérii... pri zmene obrázka A na obrázok B vznikne efektný prechod...
Červený štvorec, ktorý po príchode kurzora sa začne rozširovať, následne po 2s sa začne meniť farba na modrú.Príklady:
<html>
<body>
<style>
div {
background: red;
width: 55px;
height: 55px;
}
div:hover {
background: blue;
width: 200px;
height: 55px;
-webkit-transition-property:
width, background;
-webkit-transition-duration:
3s, 2s;
-webkit-transition-timing-function:
linear, linear;
-webkit-transition-delay:1s,
2s;
}
</style>
<div></div>
</body>
</html>
Ďalší príklad sa dá využiť v menu, teda je určitá časť, na ktorú po príchode kurzora chceme, aby sa rozbalilo tzv. podmenu. V tomto príklade je uvedená jednoduchá ukážka prevedenia s využitím prechodu transition, so skráteným zápisom transition:
<html>
<body>
<style>
div {
overflow: hidden;
background: red;
width: 305px;
height: 1.2em;
}
div:hover {
background: red;
width: 305px;
height: 2.5em;
-webkit-transition: height
2s linear;
}
span {
display: block;
}
</style>
<div>Schovaný text:
<span> je tu!</span></div>
</body>
</html>