CSS animácie a jeho možnosti

Zaujíma vás, ako sa robí animácie CSS, mnohí užívatelia ísť hľadať poučenie a pokynov. A aj keď takéto pokyny možno nájsť tu, okrem iného, budeme vám hlavné užitočné rady pri vytváraní animácií pomocou CSS.

Ideálne vývoj tajomstvo

Rada, ktorá môže byť daná prednosť tým, ktorí si chcú poriadne vedieť, čo je plynulé animácie CSS, je nasledujúci. Keď denná experimenty s pripravenými kúskami kódu a snaží sa vykonávať vlastné experimenty. V čase voľného z práce na svojich vlastných stránkach, pokúsiť sa zistiť, čo sa stane s skladanie kus kódu, študovať ten či onen majetok v plnej výške. Pokúsiť sa realizovať všetky druhy zaujímavých nápadov za použitia úplne odlišné jazykové nástroje a CSS animácie sa otvorí pre vás úplne novým spôsobom. Táto jednoduchá rada znie - experiment pre seba.

CSS animácie vzhľad

A teraz za zaujímavé príklady. Spravidla štandardné použitie animácie je zmeniť niektoré prvky webu postupne v priebehu času. Ale to je príliš zrejmé, nie? Tak sme tu s vami podeliť o mimoriadny spôsob, ako využiť čas vzhľadu animácie.

Skutočnosť, že skutočné zmeny na mieste v kuse animácie alebo v celom rozsahu môže byť takmer okamžitá. K tomu, žiadame akékoľvek dva kľúčové snímky, ale iba veľmi malý rozsah. Napríklad, môže byť rovný 0,001%. V tomto prípade, CSS animácie sa môže stať okamžite. Je ideálny pre simuláciu neónový nápis. Táto značka bude blikať, a v prípade, že animácia CSS potom bude väčšia transparentnosť a použitia a funkcie textu tieň, znak bude takmer ako skutočná vec.

Tu je príklad kódu.

Zlepšenie funkčných tlačidiel

Ak vezmeme do úvahy otázku, čo môže byť neobvyklý tlačidlo CSS-animácie, možno povedať, že tlačidlo Možnosti dekorácie na stránkach veľké set. Pozrime sa na jeden príklad. Účinok stlačenie konvexné tlačidla. Príklad kódu - nižšie.

S takým jednoduchým kusom animácie CSS bloku kódu bude vyzerať celkom dobre. Vyzerá to veľmi zaujímavé a je často používaný na úplne odlišných miestach.

CSS animácie, keď nabehnete úryvok webe

Dynamický a moderné miesto, tým dlhšie zostáva na užívateľovi. Okrem toho, dôležitú úlohu zohráva aj interaktivitu. To je iste pravda, ale to, čo môže pomôcť, aby sa web ako interaktívne, ako je to možné?

Veľmi dobre potom sa pozrite sa na prácu s dizajnovými prvkami a fragmenty mieste, keď sa myš. Animácia tlačidlá, keď nabehnete sme diskutovali vyššie, ale okrem toho môžete "oživiť" a rôzne kusy mieste, čo je najštýlovejšie. Rovnako ako u všetkého ostatného, hlavným princípom tu - nepreháňajte to.

Takže, tam je výborný prechod vlastníctva, čo môže trvať až štyri súvisiace vlastnosti.

Počas určitého časového CSS-animácie, keď nabehnete na tento kus kódu zmení. Čas je určená vlastnosť trvanie. To znamená, že keď nabehnete na položku začína podivnú zmenu akéhokoľvek majetku, ktorý sme si stanovili v selektora. V našom prípade je to - .element (bod vpred). Trochu nižšie ako je príklad kódu, keď je prechod z kontajnera div, ktorý má pseudo .hover, pozadia mení z červenej na zelenú.

Keď sa užívateľ pohybuje myšou CSS animácie nezmení okamžite, ale oneskorené nejakým zlomku sekundy, čo vytvára zaujímavý efekt.

Okrem toho, ak je v predchádzajúcom príklade, budete požiadaní o určitej pravidlo, ktoré na pozadí v prvku div, ktorý bol zmenený z červenej na zelenú a pohybu v rámci 0,4 sekundy, treba poznamenať, že používanie všetkej hodnoty, môžete aplikovať na celý objekt je úplne okamžite.

Príklad kódu zastúpené takto.

Ako je znázornené na vlastnostiach polstrovanie a pozadia prechodového efektu dôjde, ktorý je určený prechod vlastníctva. Mali by ste si uvedomiť, že môžete zadať čiarkami oddelený určitý súbor hodnôt.

Niektoré nuansy použitie tohto typu animácie na gombíky

V zásade, z dlhodobého hľadiska to nie je tak dôležité, v akom poradí budú špecifikované a prenesený do dátových hodnôt. S výnimkou jedného prípadu. Môžeme rokovať s majetkom meškanie. V tomto prípade musíme určiť dĺžku a čas. Inými slovami, budeme potrebovať kód povedať, ako dlho veľmi potrebné, aby nás dôjde k oneskoreniu.

Vzhľadom k tomu, že niektoré vlastnosti nemôžu byť účinok prechodu. To znamená, že nemôžu byť prechodné. To je spôsobené tým, že nemôžu byť animované.

animácie textu

S pomocou kódu možno nastaviť a vynikajúcim textom animácie CSS. To môže byť nejaký druh výrobku, a hlavné titul, názov webu. Ako bolo uvedené vyššie, hlavná vec - nepreháňajte to a neotáčajte svoje stránky na skládke, ktorá bude vyzerať lacné.

Dobre, poďme sa pokúsiť zistiť, čo CSS animácie textu, a vytvoriť a textové tiene. Možno ste videli horory, kde názvy obrazov samotných zdalo miznúť kedykoľvek matne tmavom pozadí. Pokúsme sa znova všeobecný príklad niečoho takého.

Animovať text v štýle hororov

V skutočnosti celá myšlienka je, aby text, v ktorom listy boli trochu nejasný a bude otáčať. Kde medzi písmenami by mala byť medzera. Budeme používať interalphabetic odtieni, rovnako ako interval. Aby bolo možné realizovať myšlienku, že potrebujeme scenár Lettering.js autorskej Dave Rupert. Musel zabaliť slová plus niekoľko písmen v tagu rozpätí. Najprv musíte zabaliť frázu h2 tag. Tu je príklad kódu.

Potom obernom všetky slová v H2 tagov v tagu rozpätí.

Stáva sa to takto.

Bude to vyzerať trochu ťažkopádne, ale nenechajte sa obťažovať.

Manic získať dostatočné štruktúry.

Výsledkom je, že máme jeden z našich súčasných listy zabalené v tagu rozpätí. Ako sa ukázalo, naozaj veľa. Ale príklad je dosť zjednodušujúce v kóde nad viedlo. Celá ich štruktúra, môžete písať sami, a bude to trochu viac. Záleží tiež na tom, aké textu, ktorý chcete použiť.

Došli sme k záveru našej práce trochu štylizované. Všetky naše tituly vo vyššie uvedenom príklade, sa bude nachádzať v celej šírke obrazovky. A budú trvať až takmer všetky dostupné miesto.

Vzhľadom k tomu, že budeme umiestniť všetky naše listy sa sústredil na obrazovke, teda pre naše nádoby a tiež potrebujeme flexboxu.

Tu je príklad jeho kódu.

Teraz sme urobili tak, aby všetky listy, ktoré sú zabalené v span class, ktorý patrí do nadradenej triedy .os viet, bude umiestnený, a bude k nemu pripojená v stredu.

Nezabudnite sa pridať trochu voľného priestoru, ktorý je sám o sebe písmeno medzery.

V tomto prípade je prvý obal chceli mať niektoré ďalšie vlastnosti. Táto vlastnosť perspektíva. To nám umožní, aby sa ubezpečil, že tento web bude ako vyniknúť, dostali do popredia.

Samy o sebe ako naše listy budú transparentné, a my začne sériu animácií pre nich niekde v 5,2 sekundy. Nižšie - príklad kódu.

Je tiež dôležité určiť, ako as akým oneskorením sa objaví naše viet a fráz. Ktorý z tých častí textu, objaví sa rýchlejšie ako ten predchádzajúci, a koľko. Kód bude vyzerať takto.

Poďme dať malý, ale veľmi zaujímavý efekt. Umiestnite nepriehľadnosť 0,2. Interalphabetic vzdialenosť tak bude pomerne veľká. Listy budú tiež otáčať niekoľkých osi Y. Dovidenia, rovnako ako užívatelia vašich stránok bude len malá časť z týchto listov. Tiež nezabudnite dať vplyv vlastností text-shadow. Polovica animácie, urobili sme neobvyklú vec. My budeme smerovať Písmená sami, a tiež k zníženiu vzdialenosti, ktorá je medzi nimi, a potom zvýši transparentnosť a po povernom nápisy na 0 ° C na osi Y.

Na konci sme zase pridať niekoľko písmen alebo ohrozený promasshtabiruem je. To dá nový malý efekt rozostrenia.

A konečne posledná veta CSS animácie.

A áno, nakoniec sa pridá konečný vzhľad. Zameriame na niektoré konkrétne slová. Budú mať tučne. To dá potrebný dôraz.

Nezabudnite na inšpiráciu

Pri pokuse o experimentovať sa s vlastnosťami a CSS animácie, sa snaží nájsť inšpiráciu vo všetkom, v každodennom živote. To môže byť čokoľvek, od zaujímavých webových stránok do určitej nádhernej video efekt.

Okrem toho, ak nechcete vyzvedať, ako ten či onen efekt robiť, a pokúsiť sa znovu na vlastnú päsť, môžete dosiahnuť vynikajúce výsledky. Alebo aspoň, vždy dozvedieť niečo viac o možnostiach programovací jazyk, ktorý ste v skutočnosti, použite ju. Ani plne uvedomil váš nápad môže ukázať ako veľmi efektné.