CSS Transitions: popis, funkcie a funkcie využitia

Vytvorenie dobrého webu dnes jednoducho: existuje dostatok špecialistov, aktívne procesy zlepšovania funkčnosti a jeho aktívne sledovanie (štruktúra a obsah). Posledným z nich je dizajn CSS - ako najjednoduchšie, nákladovo efektívne a efektívne riešenie.

Boj medzi vývojármi pre zákazníka a vlastníkov stránok pre záujem návštevníkov a návštevnosť zdrojov sa presunul do sféry jemnej reklamy a jemného (teplého a dynamického) obsahu.

CSS Transitions

Podľa súčasného stanoviska CSS Transitions v pseudo-triede: vznášať a späť. Existuje štýl štítku, napríklad TagStyle, a existuje štýl štítku TagStyle: hover. Úlohou pseudotriedy je zaradiť obsah všetkých pravidiel druhého popisu do prvého, akonáhle je myš nad ním, a hneď ako to ide, vráťte všetko späť. V tejto schéme (v klasickej verzii) sa zvyčajne mení farba pozadia, farba textu, rámček, zaokrúhlenie, vresy a iné viditeľné prvky. Použitie pravidla CSS Transitions umožňuje plynulé a plynulé spracovanie.

Pravidlo môže meniť mnoho ďalších prvkov, ale zvyčajne sa používajú špecifikované. Kompletný zoznam pravidiel, ktoré sú ovplyvnené vlastníctvom Transition CSS, nájdete na oficiálnych zdrojoch na internete.

Obsah prechodového pravidla

Úloha pravidla: plynulé premiestňovanie iných pravidiel z jedného štátu do druhého, takže prechod CSS zahŕňa (transition = '*):
  • názov vlastníctva, majetok);
  • trvanie procesu (* -dukcia);
  • prechodová funkcia (* -timingová funkcia);
  • oneskorenie začiatku procesu (* -delenie).
  • Podľa pravidiel CSS môže byť povolená krátka položka pravidiel:
  • transition: all 1 s easy .5 s;
  • Prechod sa vzťahuje na všetky pravidlá, vykonané za sekundu v štýle "ľahkosti" s oneskorením pol sekundy. Totéž, napísané prvkami pravidla:
  • * -property: všetko;
  • * -dukcia: 1s;
  • * Funkcia Timing: jednoduchosť;
  • * -delenie: .5s;
  • Pravidlo o prechode je podporované hlavnými prehliadačmi, ale nikdy s tým neporušuje a existujú krížové prehliadače písomných pravidiel.

    Klasická aplikácia

    Najjednoduchšia a často používaná je prechodová farba pozadia (symbol): CSS Prechod: pozadia:
    V tomto príklade sa na prechodové pravidlo uplatní iba pravidlo prechodu na farbu (trvanie 2 sekúnd, funkcia odľahčenia, oneskorenie 0,2 sekundy) a ostatné pravidlá sa okamžite presunú do iného stavu.

    Funkcia prechodu (štýl)

    Dôležitou súčasťou pravidiel CSS je prechodová funkcia, tj časová krivka pre uskutočnenie prechodu z jedného štátu do druhého. Hladká (ľahká) je predvolená hodnota: prechod začína pomaly, urýchľuje a spomaľuje na konci.
    Hodnota "lineárna" definuje jednotný prechod: "easy-in" - pomaly spúšťa prechod, potom hladko urýchľuje na koniec a "ease-out" - pracuje naopak. Funkcia cubic-bezier (x1 y1 x2 y2) vám umožňuje vytvoriť vlastnú možnosť prechodu, ale pomocou oficiálnych zdrojov a stránok, ktoré majú dobré skúsenosti s Bezierovou krivkou, je ešte lepšie. Niečo nové určite nevyjde, ale skúsenosti s príjemnou voľbou očí a návštevníkmi psychológienahromadený je stále značný.

    Kombinácia prechodu s transformáciou

    Dobrý efekt je daný kombináciou pravidiel CSS Transition & Transformácia. Prvý určuje čas procesu, druhý ukazuje, že robiť celú túto dobu. Prevod umožňuje premiestňovať značky, otáčať, meniť veľkosť, meniť pozíciu. Pozrime sa na túto kombináciu:
  • premeniť: otočiť (180 °);
  • prechod: všetky 2 s easy-out .2 s;
  • Za dve sekundy otočí obsah značky o 180 stupňov. Eksperementuyuchy s funkciami prekladať, mierka, otočenie, skosenie, a ich variácie, môžete dosiahnuť zaujímavé efekty a aby jeho práca jedinečnú originalitu.
    CSS3 umožňuje vykonávať transformačný 3d, že prevod tag súradníc XYZ, že sochetatsyy CSS Transitions umožňuje otáčať text a podľa potreby tvary na dosiahnutie tohto cieľa.

    Zlučiteľnosť s pravidlami prechodu

    Ak budeme používať CSS prechody na pozadí, hranice, farby a iných zrejmých vizuálnych pravidiel normálne, prirodzene a ľahko, v niektorých prípadoch, napríklad pokusy spojiť CSS prechod & amp; Display, môžete jednoducho tráviť čas a nedosiahnuť požadované.
    Všeobecne možno povedať, že plánujete používať vizuálne efekty, odporúča sa zaistiť "viditeľný z verstaemoho." Dobrými tvary rotácie alebo text v priebehu času - akciu, ktorá má málo čo do činenia s majetkom, ktorý umožňuje zobrazenie, viditeľnosť, z-index. Avšak, v prípade, že posledné dva sú jasne uvedené v zozname pravidiel, ktorá sa týka CSS prechod, prvá vec, ktoré nie sú uvedené, hoci jeho použitie prináša označiť niečo významné, ale zle riadená.


    Pravidlo prechodu nie je len: pohybovať sa vzad a späť, môže sa úspešne použiť aj na iné pseudotriedy, napríklad: zaostrenie alebo: aktívne. Všeobecne platí, že prechod a transformácia sú tie funkcie CSS, ktoré nemajú priamy vzťah k logike vecí (to isté sa týka štýlov, nie algoritmov). Ale v posledných rokoch sa dôraz posunul tak, že nepoužívanie bohatého arzenálu CSS a CSS3 je jednoducho neprijateľným luxusom.

    Na abnormálne a prírodné

    V raných dobách osobných počítačov, kedy matematické výpočty vyrobené matematický procesor nebol normálne mať 386 počítač bez matematický koprocesor, pokiaľ išlo o efektívne využitie Fortran-programu pre výpočet cestu Mesiac Prirodzene, dnes nikto nepríde do hlavy, kupuje si počítač a pýta sa, či má hardvérové ​​prostriedky na matematické výpočty.
    Koncepty štýlov nepochybne majú veľmi malú súvislosť s algoritmom na výpočet prechodného času z jedného štýlu do iného alebo premenou značky na inú značku. Značka nie je elektrón, ktorý sa otáča v blízkosti atómu.
    A CSS - podľa definície, tabuľka kaskádových štýlov a momenty dedičnosti, berúc do úvahy mobilné zariadenia, s prioritami, kombináciami. Ale svet sa mení tak rýchlo. V dnešnej dobe matematika nebudete volať iný vzorec, pretože koncept čísla v modernom programovacom jazyku sa výrazne nelíši od koncepcie riadku. Ale ak to všetko vyhovuje, ak je to pohodlné a účinné, potom môže byť zmysluplné zmeniť svoje vlastné nápady. Možno je to CSS Transition & amp;Transformácia spôsobí takú malú revolúciu: nemusíte programovať to, čo nepotrebujete už dávno. Programátori už dávno trpia chorobou povolania, ktorá je iná: prepísať nielen to, čo urobili iným pri ďalšej úlohe, ale aj to, čo urobili včera. Čo robiť, svet a technológia sa menia a dokonca aj malé premeny v oblasti niekedy vedú k potrebe výrazných zmien v kóde. Takáto transformácia matematických algoritmov v krásnych a pohodlných pravidlách CSS je však veľmi praktická a efektívna.

    Súvisiace publikácie