Animácie na webovej stránke môžu prilákať viac používateľov. Položte si otázku - ak by ste videli webovú stránku, ktorá má dosť animácií, nechceli by ste preskúmať viac? Teraz s prechodmi CSS môžete oživiť svoju prácu skvelými animáciami. A pamätajte, že tieto kroky je potrebné robiť správne. Pozrime sa na svet prechodov CSS v nasledujúcom poradí:
- Prečo CSS Transitions?
- Prechodné vlastníctvo
- Čo je potrebné uviesť?
- Vlastnosť funkcie Transition-timing-function
- Vlastnosť Transition-Delay
Prečo CSS Transitions?
Zoberme si príklad. Ak by ste chceli zmeniť farbu prvku z bielej na modrú, táto zmena je takmer okamžitá. Pre animovanejší efekt môžete túto zmenu uskutočniť postupne. Aj toto vyzerá celkom vizuálne príťažlivo. Povolením prechodov CSS môžete prispôsobiť spôsob, akým sa zmeny vyskytujú. Môžete definovať, ako sa zmeny prvkov vyskytujú v konkrétnych časových intervaloch, ktoré sledujú krivku zrýchlenia.
Prechody CSS vám umožňujú definovať zmeny pre prvky, konkrétne časové intervaly, rýchlosť krivky zrýchlenia a oveľa viac. Toto všetko môžete urobiť bez použitia programu Flash alebo JavaScript .
Pre lepšie pochopenie môžete použiť nasledujúci obrázok:
Na obrázku vyššie sa prvok HTML zmení z červenej na modrú v priebehu jednej sekundy. Keď dôjde k prechodu, uvidíte tiež prechodnú farbu. Ak nebudete používať prechody CSS, všimnete si, že zmena farby z červenej na modrú je okamžitá - neuvidíte prechodnú farbu. Pri prechodoch CSS si všimnete animovaný efekt, keď sa prvky HTML menia zo starého stavu na nový.
Prechodné vlastníctvo
Vlastnosť skratkového prechodu môžete použiť na riadenie prechodov CSS. Používanie tejto skratky je nielen ľahké, ale tiež sa dá vyhnúť nesynchronizovaným parametrom, ktorých ladenie v CSS môže byť dosť frustrujúce.
Vlastnosť transition určuje vlastnosť CSS, na ktorú chcete mať efekt prechodu. Animované sú iba tieto vlastnosti CSS.
Syntax:
prechod:
Ako začiatočník sa môžete pri používaní skratky stretnúť s určitými ťažkosťami. Ak si myslíte, že použitie skratky je pre vás v súčasnosti trochu zložité, môžete určiť vlastnosti prechodu zvlášť. Pre element HTML môžete určiť vlastnosti prechodu jeden po druhom, ako je uvedené v nasledujúcom príklade:
metóda 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}Umiestnite kurzor myši na krabicu
Vo vyššie uvedenom príklade sme špecifikovali vlastnosti (vlastnosť prechodu, doba prechodu, funkcia časovania prechodu a oneskorenie prechodu) a ich hodnoty osobitne. O týchto vlastnostiach prechodu sa dozvieme čoskoro.
Čo je potrebné uviesť?
Pri vytváraní prechodov CSS musíte určiť predovšetkým dve veci: vlastnosť CSS, ku ktorej chcete pridať efekt, a časové trvanie tohto efektu.Musíte mať na pamäti jednu vec - keď neurčíte čas, prechod bude mať predvolenú hodnotu 0 , a nebude to mať žiadny vplyv.
Uvažujme príklad:
Nasledujúci kód definuje prechodový efekt vlastnosti width na dobu piatich sekúnd.
div {šírka: 100px výška: 100px pozadie: modrý prechod: šírka 5s} div: hover {šírka: 600px}Presunutím kurzora nad prvok div vyššie zobrazíte efekt prechodu.
Vo vyššie uvedenom kóde uvidíte, že keď umiestnite kurzor myši na modré pole, modré pole postupne zväčšuje svoju šírku po dobu piatich sekúnd. Tiež si všimnete, že keď odstránite kurzor z modrého poľa, modré pole sa vráti do pôvodnej veľkosti postupne (nie okamžite). Môžete tiež zmeniť hodnoty šírky a času, aby ste videli, ako táto vlastnosť prechodu ovplyvňuje prvok HTML.
Prechodový efekt môžete pridať aj do viacerých vlastností. Môžete to urobiť tak, že vlastnosti oddelíte čiarkami. Uvažujme príklad:
V nižšie uvedenom kóde je vlastnosť prechodu určená pre šírku, výšku a transformáciu.
div {výplň: 15px šírka: 150px výška: 100px pozadie: zelený prechod: šírka 2s, výška 2s, transformácia 2s} div: hover {šírka: 300px výška: 200px transformácia: otočenie (360deg)} Ahoj svet (Hover Over Me)
Na vyššie uvedenom príklade uvidíte, ako sa pohybuje zelené políčko, keď na neho umiestnite kurzor myši.
triediť pole c ++ zostupne
Zadali sme iba vlastnosť a čas trvania. Pozrime sa na ďalšie parametre s rôznymi príkladmi.
Vlastnosť funkcie Transition-timing-function
Táto vlastnosť definuje rýchlostnú krivku pre prechodový efekt. Môže mať nasledujúce hodnoty:
- Ľahká hodnota: Toto je predvolená hodnota, pri ktorej je efekt na začiatku pomalý, potom rýchlejší a pomaly končí.
- Lineárna hodnota: Tento efekt nemení rýchlosť prechodu - udržuje konštantnú rýchlosť od začiatku do konca.
- Hodnota uľahčenia: Tento efekt sa začína pomaly.
- Hodnota ukončenia: Tento efekt má pomalý koniec.
- Hodnota Ease-in-out: Tento efekt má pomalý aj pomalý začiatok.
- Kubicko-Bézierova hodnota (n, n, n, n): Vo funkcii kubický-Bézier môžete určiť svoju vlastnú množinu hodnôt.
Nasledujúci kód zobrazuje prechodové efekty pre lineárne hodnoty, hodnoty ľahkosti, uľahčenia vstupu, uvoľnenia a uvoľnenia.
div {width: 100px height: 100px background: pink transition: width 2s} # div1 {transition-timing-function: linear} # div2 {transition-timing-function: easier} # div3 {transition-timing-function: easier-in } # div4 {transition-timing-function: easier-out} # div5 {transition-timing-function: easier-in-out} div: hover {width: 300px}Umiestnite kurzor myši na prvky div uvedené nižšie
lineárny
ľahkosť
uľahčenie
odľahčenie
easy-in-out
Vlastnosť Transition-Delay
Niekedy chcete, aby sa animácia vyskytla po určitom čase. Vlastnosť prechodu a oneskorenia vám umožňuje určiť oneskorenie pre prechodový efekt. Môžete určiť oneskorenie v sekundách.
Uveďme si príklad na príklade oneskorenia prechodového efektu:
div {šírka: 100 pixelov výška: 100 pixelov pozadie: žltý prechod: šírka 3 s oneskorenie prechodu: 1 s} div: vznášať sa {šírka: 300px}Umiestnite kurzor myši na prvok div nižšie
Poznámka: Môžete pozorovať, že 1 sekundové oneskorenie pred začiatkom účinku
Keď v kóde vyššie umiestnite kurzor myši na žlté políčko, všimnete si (na jednu sekundu), že nemá žiadny efekt. Po jednej sekunde si účinok všimnete.
Týmto sa dostávame na koniec tohto článku o prechodoch CSS. Na svoje webové stránky môžete teraz pridávať animácie. Vyskúšajte tieto príklady.
Vyskúšajte naše ktorá prináša živé školenie vedené inštruktorom a skúsenosti s projektmi v reálnom živote. Toto školenie vám pomôže získať zručnosti v oblasti práce s webovými technológiami typu back-end a front-end. Zahŕňa školenie zamerané na vývoj webových aplikácií, jQuery, Angular, NodeJS, ExpressJS a MongoDB.
Máte na nás otázku? Uveďte to v sekcii komentárov blogu „CSS Transition“ a my sa vám ozveme.