si asta e! Să vedem cum arată în realitate.

La început Marcaj HTML... Este foarte simplu pentru că lucrăm doar cu un element pe pagină.

1	<div class = "toSmallWidth">

Și iată ce este în foaia de stil:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth (marja: 20px automat; /*căptușeală exterioară sus și jos cu 20px și alinierea la mijloc * / fundal: roșu; / * fundal roșu pentru bloc * /înălțime: 100px; / * înălțimea blocului 100px * / latime: 800px; / * latime initiala 800px * /-webkit-animation-name: animWidthSitehere; -webkit-animatie-durata: 5s; / * proprietate prefixată pentru Browsere Chrome, Safari, Opera * / animation-name: animWidthSitehere; / * specificați numele cadrelor cheie (situate mai jos) * / animatie-durata: 5s; / * setați durata animației * / } / * cadre cheie cu un prefix pentru browserele Chrome, Safari, Opera * / @ -webkit-keyframes animWidthSitehere ( de la (lățime: 800px;) la (lățime: 100px;)) @keyframes animWidthSitehere ( de la (lățime: 800px;) / * primul cadru cheie în care lățimea blocului este de 800 px * / la (lățime: 100px;) / * ultimul cadru cheie în care lățimea blocului este de 100 px * / }

După cum puteți vedea, am specificat doar primul și ultimul cadre cheie, iar toate cele intermediare au fost „construite” automat.

Prima animație CSS3 este gata. Pentru a consolida cunoștințele acumulate - creați document HTMLși fișier CSS, și acolo inserați (a maini mai bune tip) codul din exemplu. Atunci cu siguranță vei înțelege totul. Apoi încercați să faceți același lucru cu înălțimea blocului (ar trebui să scadă în înălțime) pentru a asigura materialul.

3. Exemplele de animație CSS3 sunt mai complexe

Mai sus, ați învățat cât de ușor este să creați animații CSS3. Dacă ați încercat să faceți acest lucru cu propriile mâini, atunci ați înțeles deja întregul proces și acum doriți să știți cum puteți crea un proces mai complex și mai complex. frumoasa animatie... Și este cu adevărat posibil să-l creezi. Mai jos sunt 3 lecții în care animația este creată în același mod ca în exemplul de mai sus.

3 tutoriale de animație CSS (transformări)

Tutorialele vă vor ajuta să înțelegeți și mai bine animația CSS. Principalul lucru este să încerci să repeți ceea ce vezi în lecții. Sau cel puțin încercați să schimbați valorile proprietății și să vedeți ce se întâmplă, atunci vă va fi mai puțin frică de CSS.

| 18.02.2016

CSS3 deschide posibilități nelimitate pentru designerii UI, iar principalul avantaj este că aproape orice idee poate fi implementată și implementată cu ușurință fără a recurge la JavaScript.

Este uimitor cât de simple pot anima o pagină web obișnuită, făcând-o mai accesibilă pentru utilizatori. Este despre tranzițiile CSS3, cu ajutorul cărora puteți permite unui element să transforme și să schimbe stilul, de exemplu, la hover. Cele nouă exemple de animații CSS3 disponibile mai jos vor ajuta la crearea unei atmosfere receptive pe site-ul dvs. și, de asemenea, vă vor îmbunătăți forma generala pagini datorită tranzițiilor fine și frumoase.

Pentru informații mai detaliate, puteți descărca arhiva cu fișierele.

Toate efectele funcționează folosind proprietatea de tranziție. tranziție- „tranziție”, „transformare”) și pseudo-clasa: hover, care determină stilul elementului atunci când treci cu cursorul mouse-ului peste el (în tutorialul nostru). Pentru exemplele noastre, am folosit bloc div dimensiune 500 × 309 pixeli, culoare originală de fundal # 6d6d6d și durata tranziției de la o stare la alta 0,3 secunde.

Corp> div (lățime: 500px; înălțime: 309px; fundal: # 6d6d6d; -webkit-transition: toate 0.3s ease ;; -moz-transition: toate 0.3s ease ;; -o-transition: toate 0.3s ease ;; tranziție: toate 0.3s ușurință;)

1. Schimbați culoarea la trecerea cursorului

Pe vremuri, implementarea unui astfel de efect a fost o muncă destul de minuțioasă, cu calcule matematice valori RGB specifice. Deocamdată este suficient să notezi Stilul CSS, în care trebuie să adăugați: pseudoclasa hover la selector și să setați culoare de fundal, care va înlocui fără probleme (în 0,3 secunde) culoarea originală de fundal atunci când treceți cu mouse-ul peste bloc:

Culoare: hover (fundal: # 53ea93;)

2. Aspectul cadrului

O transformare interesantă și vie - un cadru interior care apare lin la trecerea mouse-ului. Bun pentru decorarea diverselor nasturi. Pentru a obține acest efect, folosim: pseudo-clasa hover și proprietatea box-shadow cu parametrul inset (setează umbra în interiorul elementului). În plus, va trebui să setați întinderea umbrei (în cazul nostru, este de 23px) și culoarea acesteia:

Chenar: hover (box-shadow: insert 0 0 0 23px # 53ea93;)

3. Leagăn

Această animație CSS este o excepție, deoarece proprietatea de tranziție nu este utilizată aici. În schimb, am folosit:

• @keyframes este o directivă de bază pentru crearea de animații CSS cadru cu cadru care vă permite să faceți așa-numitele. storyboard și descrie animația ca o listă de puncte cheie;
• animation and animation-iteration-count - proprietati pentru setarea parametrilor de animatie (durata si viteza) si numarul de cicluri (repetitii). În cazul nostru, repetați 1.

@ -webkit-keyframes swing (15% (-webkit-transform: translateX (9px); transform: translateX (9px);) 30% (-webkit-transform: translateX (-9px); transform: translateX (-9px); ) 40% (-webkit-transform: translateX (6px); transform: translateX (6px);) 50% (-webkit-transform: translateX (-6px); transform: translateX (-6px);) 65% (-webkit -transform: translateX (3px); transform: translateX (3px);) 100% (-webkit-transform: translateX (0); transform: translateX (0);)) @keyframes swing (15% (-webkit-transform: translateX (9px); transform: translateX (9px);) 30% (-webkit-transform: translateX (-9px); transform: translateX (-9px);) 40% (-webkit-transform: translateX (6px); transform : translateX (6px);) 50% (-webkit-transform: translateX (-6px); transform: translateX (-6px);) 65% (-webkit-transform: translateX (3px); transform: translateX (3px); ) 100% (-webkit-transform: translateX (0); transform: translateX (0);)) .swing: hover (-webkit-animation: s usurinta aripii 0.6s; animație: swing 0.6s ușurință; -webkit-animație-număr-iterații: 1; animație-număr-iterație: 1; )

4. Atenuare

Un efect de estompare este în esență o simplă schimbare a transparenței unui element. Animația este creată în două etape: mai întâi, trebuie să setați starea inițială de transparență la 1 - adică opacitatea completă, apoi să specificați valoarea acesteia pe mouse-ul peste - 0,6:

Fade (opacitate: 1;) .fade: hover (opacitate: 0,6;)

Pentru rezultatul opus, schimbați valorile:

5. Creșteți

Pentru a face blocul să crească la hover, vom folosi proprietatea de transformare și o vom seta la scară (1.2). În acest caz, blocul va crește cu 20 la sută, menținându-și proporțiile:

Crește: hover (-webkit-transform: scară (1.2); -ms-transform: scară (1.2); transform: scară (1.2);)

6. Scăderea

Micșorarea unui element este la fel de ușor ca și mărirea acestuia. Dacă în al cincilea paragraf, pentru a crește scara, trebuia să specificăm o valoare mai mare decât 1, atunci pentru a reduce blocul, specificăm pur și simplu o valoare care va fi mai mică de unu, de exemplu, scara (0,7). Acum, la trecerea mouse-ului, blocul se va micșora proporțional cu 30 la sută din dimensiunea sa inițială:

Micșorare: hover (-webkit-transform: scară (0,7); -ms-transform: scară (0,7); transform: scară (0,7);)

7. Transformarea în cerc

Una dintre animațiile utilizate în mod obișnuit este un element dreptunghiular care se transformă într-un cerc la hover. Folosind proprietatea CSS chenar-rază utilizat împreună cu: hover și tranziție, acest lucru se poate face fără probleme:

Cerc: hover (raza-chenar: 70%;)

8. Rotire

O opțiune amuzantă de animație este să rotiți un element cu un anumit număr de grade. Pentru asta vom avea nevoie din nou transforma proprietatea, dar cu o valoare diferită - rotițiZ (20deg). Cu acești parametri, blocul va fi rotit cu 20 de grade în sensul acelor de ceasornic în jurul axei Z:

Rotire: hover (-webkit-transform: rotireZ (20deg); -ms-transform: rotireZ (20deg); transformare: rotireZ (20deg);)

9.3D umbră

Designerii nu sunt de acord dacă acest efect este adecvat pentru designul plat. Cu toate acestea, această animație CSS3 este foarte originală și este folosită și pe paginile web. Vom obține un efect tridimensional utilizând proprietățile deja familiare box-shadow (vom crea o umbră cu mai multe straturi) și vom transforma cu parametrul translateX (-7px) (va oferi o deplasare orizontală a blocului la stânga cu 7 pixeli). ):

Trei: trece cu mouse-ul (box-shadow: 1px 1px # 53ea93, 2px 2px # 53ea93, 3px 3px # 53ea93, 4px 4px # 53ea93, 5px 5px # 53ea93, 6px 6px # 53ea93, 6px 6px # 53ea93; -7px); transforma: translateX (-7px);)

Suport pentru browser

Proprietatea de tranziție este acceptată în prezent de următoarele browsere:

Browsere desktop
Internet Explorer	Sprijinit de IE 10 și mai sus
Crom	Acceptat de la versiunea 26 (până la versiunea 25 funcționează cu prefixul -webkit-)
Firefox	Suportat începând cu versiunea 16 (în versiunile 4-15 funcționează cu prefixul -moz-)
Operă	Suportat începând cu versiunea 12.1
Safari	Suportat începând cu versiunea 6.1 (în versiunile 3.1-6 funcționează cu prefixul -webkit-)

Restul proprietăților utilizate în aceste exemple, cum ar fi transform, box-shadow etc., sunt, de asemenea, acceptate de aproape toată lumea. browsere moderne... Cu toate acestea, dacă veți folosi aceste idei pentru proiectele dvs., vă recomandăm insistent să verificați din nou compatibilitatea între browsere.

Sperăm că aceste exemple de animație CSS3 v-au fost utile. Vă dorim succes creativ!

Am văzut asta recent tranziții este doar o cale animatii proprietăți de stil din originalul inainte de finala state.

Deci tranzițiile în CSS sunt specific după tipul de animație, unde:

• există doar două stări: început și sfârșit;
• animația nu este în buclă;
• stările intermediare sunt controlate doar de funcţia timpului.

Dar dacă vrei:

• a avea control asupra intermediar state?
• a bucla animaţie?
• do tipuri diferite animatii pentru unu articol?
• animați o anumită proprietate numai pe jumatate de modul în care?
• imita diverse funcții timp pentru diferite proprietăți?

Animația în CSS permite toate acestea și multe altele.

Animația este ca un mini-film, în care tu, ca regizor, dai instrucțiuni (reguli de stil) actorilor tăi ( elemente HTML) pentru scene diferite(cadre cheie).

Proprietăți de animație

La fel ca tranziția, proprietatea animație este abreviat pentru altii:

• animation-name: numele animației;
• animatie-durata: cat dureaza animatia;
• animation-timing-function: cum sunt calculate starile intermediare;
• animation-delay: animația începe după ceva timp;
• animation-iteration-count: de câte ori ar trebui să fie executată animația;
• animație-direcție: ar trebui să meargă mișcarea la reversul sau nu;
• animation-fill-mode: ce stiluri sunt aplicate înainte de începerea animației și după terminarea acesteia.

Exemplu rapid

Pentru a anima butonul de descărcare, puteți scrie o animație viguros:

@keyframes bouring (0% (jos: 0; box-shadow: 0 0 5px rgba (0,0,0,0.5);) 100% (jos: 50px; box-shadow: 0 50px 50px rgba (0,0, 0,0.1);)) .button-încărcare (animație: săritură 0,5s cubic-bezier (0,1,0,25,0,1,1) 0s infinit alternează ambele;)

Mai întâi trebuie să scrieți o animație reală care sări folosind @keyframes și să o denumiți.

obisnuiam abreviat proprietate de animație și a inclus toate opțiunile posibile:

• animation-name: bouncing (se potrivește cu numele cadrelor cheie)
• durata animației: 0,5 s (o jumătate de secundă)
• funcția de sincronizare-animație: cubic-bezier (0.1,0.25,0.1,1)
• întârziere animație: 0s (fără întârziere)
• animație-iterație-număr: infinit (rejucat infinit)
• direcția de animație: alternativă (merge înainte și înapoi)
• animation-fill-mode: ambele

@keyframes

Înainte de a anima elemente HTML, aveți nevoie scrieți animație folosind cadre cheie... În general, cadrele cheie sunt oricine pas intermediarîn animație. Acestea sunt determinate folosind procente:

• 0% - primul pas al animației;
• 50% este un pas de jumătate în animație;
• 100% este ultimul pas.

De asemenea, puteți utiliza Cuvinte cheie de la și la în loc de 0% și, respectiv, 100%.

Puteți defini câte cadre cheie doriți, cum ar fi 33%, 4% sau chiar 29,86%. În practică, veți scrie doar câteva dintre ele.

Fiecare cadru cheie este regula CSS , aceasta înseamnă că puteți scrie proprietăți CSS ca de obicei.

Pentru a defini animația, trebuie doar să scrieți cuvântul cheie @keyframes cu acesta titlu:

@keyframes în jur (0% (stânga: 0; sus: 0;) 25% (stânga: 240px; sus: 0;) 50% (stânga: 240px; sus: 140px;) 75% (stânga: 0; sus: 140px;) ;) 100% (stânga: 0; sus: 0;)) p (animație: în jur de 4s liniar infinit;)

Rețineți că începutul 0% și sfârșitul 100% conțin aceleasi reguli CSS. Acest lucru se va asigura că animația este perfectă. Deoarece contorul de iterații este setat la infinit, animația va merge de la 0% la 100% și apoi imediat înapoi la 0% și așa mai departe pentru totdeauna.

animatie-nume

Nume se folosește cel puțin animația de două ori:

• la scris animații cu @keframes;
• la folosind animații folosind proprietatea animation-name (sau proprietatea scurtă animație).

@keyframes orice (/ * ... * /) .selector (nume-animație: orice;)

La fel ca numele claselor CSS, numele animațiilor pot include numai:

• litere (a-z);
• numere (0-9);
• sublinia (_);
• cratima (-).

Numele nu poate începe cu un număr sau cu două cratime.

animatie-durata

La fel ca durata tranziției, durata animației poate fi setată la secunde(1s) sau milisecunde(200 ms).

Selector (durata animației: 0,5 secunde;)

Valoarea implicită este 0s, ceea ce înseamnă că nu există deloc animație.

animatie-functie-sincronizare

Similar cu funcțiile de sincronizare pentru tranziții, se pot folosi funcțiile de sincronizare pentru animație Cuvinte cheie cum ar fi liniar, ease-out sau poate fi definit cu arbitrare curbe Bezier.

Selector (funcție de animație-timing: ease-in-out;)

Valoarea implicită este ușurință.

Deoarece animațiile CSS folosesc cadre cheie, puteți seta liniar funcţie de timp şi simula curba Bezier specifică prin definirea multe foarte specifice cadre cheie. Aruncă o privire la Bounce.js pentru animații de ultimă oră.

animație-întârziere

Ca și în cazul întârzierii tranziției, întârzierea animației poate fi setată la secunde(1s) sau milisecunde(200 ms).

Valoarea implicită este 0s, ceea ce înseamnă că nu există întârziere.

Util când sunt incluse mai multe animații serie.

A, .b, .c (animație: întârziere de 1 s;) .b (întârziere de animație: 0,25 s;) .c (întârziere de animație: 0,5 s;)

animație-iterație-număr

În mod implicit, animația este redată numai o singura data(valoarea 1). Puteți seta trei tipuri de valori:

• numere întregi, cum ar fi 2 sau 3;
• numere fracționale precum 0,5, care vor reda doar jumătate din animație;
• cuvântul cheie infinit, care va repeta animația la nesfârșit.

.selector (animație-iterație-număr: infinit;)

regia-animatie

Proprietatea animație-direcție determină în ce ordine cadrele cheie sunt citite.

• normal: începe la 0%, se termină la 100%, începe din nou la 0%.
• invers: începe la 100%, se termină la 0%, începe din nou la 100%.
• alternativ: începe de la 0%, merge la 100%, revine la 0%.
• alternativ-invers: începe la 100%, merge la 0%, revine la 100%.

Acest lucru este mai ușor de imaginat dacă numărul de iterații ale animației este setat la infinit.

animație-umplere-mod

Proprietatea animation-fill-mode determină ce se întâmplă fațăînceputul animaţiei şi după finalizarea acestuia.

În determinarea personal cheie poti specifica reguli CSS care vor fi aplicate în diferite etape ale animației. Acum aceste reguli CSS pot se ciocnesc cu cei care aplicat deja la elementele animate.

animation-fill-mode vă permite să spuneți browserului dacă stiluri de animație de asemenea ar trebui să se aplice în afara animației.

Să ne imaginăm buton, care este:

• roșu Mod implicit;
• devine albastru la începutul animației;
• si in sfarsit verde când animația este completă.

Înainte de apariția CSS3, cuvântul „animație” le-ar oferi designerilor de layout o sudoare rece. Și totul pentru că în acele zile nu era o sarcină banală să faci animație de înaltă calitate și frumoasă. CSS nu a putut face acest lucru, așa că toate animațiile au fost făcute în JavaScript. A fost necesar să răsfoiți o grămadă de forumuri, să găsiți aceiași tovarăși în nenorocire, să petreceți mult timp pe dezvoltare și, în final, să auziți de la designer: „Bine, e bine”. Și când în sfârșit a ieșit CSS3, focurile de artificii au continuat până dimineața și șampania curgea ca apa. A fost o zi mare pentru toți dezvoltatorii web (a doua zi a fost când Microsoft a anunțat că va înceta suportul pentru Internet Explorer). Odată cu sosirea CSS3, multe mai devreme sarcini provocatoare au devenit simplu și plăcut să lucrezi. Același lucru este valabil și pentru animațiile CSS, pe care le voi acoperi în acest articol.

Tranziții CSS

Tranzițiile CSS vă permit să faceți modificări proprietăților CSS fără probleme și în timp. Astfel, ai ocazia de a controla procesul de tranziție a unui element de la o stare la alta. Să începem cu cel mai simplu exemplu și să mergem mai departe.

Când treceți cu mouse-ul peste un pătrat, culoarea de fundal se schimbă fără probleme.

Acum să aruncăm o privire mai atentă asupra modului de gestionare a tranzițiilor în CSS. Suntem înarmați cu doar 5 proprietăți care vă permit să controlați animația de tranziție:

• proprietate de tranziție;
• durata tranziției;
• tranziție-funcție de sincronizare;
• tranziție-întârziere;
• tranziție;

tranziție-proprietate- indică o listă de proprietăți care vor fi animate; proprietățile care nu sunt enumerate aici se vor schimba în mod normal. Puteți anima toate proprietățile pentru un anumit element specificând valoarea all. Dacă nu ați specificat nicio proprietate, atunci valoarea implicită este toate.

Tranziție-proprietate: lățime;

durata tranziției- setează durata animației, timpul poate fi specificat în secunde sau milisecunde.

Tranziție-durată: 1s;

tranziție-funcție de sincronizare- functie de timp, indica punctele de accelerare si decelerare pentru anumită perioadă timp pentru a controla schimbarea vitezei de animație. În termeni simpli, puteți folosi această proprietate pentru a specifica comportamentul unei animații. De exemplu, putem accelera animația la început și încetinim la sfârșit, sau invers. Curbele Bezier sunt folosite pentru a defini procesul de animație. În general, funcția de sincronizare a tranziției vă permite să faceți o mulțime de comportamente diferite pentru animații, acesta este un întreg subiect pentru un articol, așa că nu vom aprofunda aici.

Tranziție-funcție de sincronizare: cubic-bezier (0, 0, 1, 1);

tranziție-întârziere- setează întârzierea înainte de începerea animației, o puteți specifica în secunde sau milisecunde.

Întârziere de tranziție: 500 ms;

tranziție- aceasta este proprietate comună, care vă permite să enumerați primele patru proprietăți în ordine: proprietate, durată, funcție de sincronizare, întârziere.

Tranziție: fundal-culoare 1s cubic-bezier (0, 0, 1, 1) 500ms;

Ne descurcam animație simplă: când treceți mouse-ul peste un pătrat, lățimea se modifică; durata animației este de o secundă; animația este redată de funcție liniară; întârziere înainte ca animația să înceapă 500 de milisecunde.

CU folosind CSS tranzițiile pot anima aproape toate proprietățile și pot crea multe animații interesante, frumoase, funcționale și chiar complexe, care vă vor completa și îmbunătăți proiectul. De exemplu, am făcut un Material-FAB ​​ca acesta pe CSS pur folosind tranziții:

Animații CSS

Animațiile CSS permit animații mai complexe decât tranzițiile CSS. Întregul secret este în @keyframes. Regula @keyframes vă permite să creați animație folosind un set de cadre cheie, adică descrie starea unui obiect la un anumit moment în timp. Să aruncăm o privire la un exemplu simplu.

Cercul nostru a prins viață și pare să pulseze.

Există 9 proprietăți care vă permit să controlați animațiile CSS:

• animatie-nume;
• animatie-durata;
• animatie-functie de sincronizare;
• animație-întârziere;
• animație-iterație-număr;
• animație-regie;
• animație-play-stare;
• animație-umplere-mod;
• animaţie;

animatie-nume- acesta este numele animației care leagă regula @keyframes de selector.

Nume-animație: animația-mea; @keyframes animația mea (0% (opacitate: 0;) 100% (opacitate: 1;))

animație-iterație-număr- setează numărul de repetări ale animației, valoarea implicită este 1. Valoarea infinită înseamnă că animația se va reda pe termen nelimitat.

Număr de iterații-animație: 2;

regia-animatie- stabilește direcția animației.

Animație-direcție: invers;

animație-play-stare - această proprietate controlează oprirea și redarea animației. Există două valori, rulare (animația este redată, în mod implicit) și întrerupt (oprește animația).

Animație-play-stare: întreruptă;

animație-umplere-mod- stabilește ce proprietăți CSS vor fi aplicate obiectului înainte sau după animație. Poate lua următoarele valori:

• none - proprietățile CSS animate vor fi aplicate obiectului numai în timpul redării animației, la finalizare obiectul revine la starea inițială;
• înainte - proprietățile CSS animate vor fi aplicate obiectului când animația se termină de redare.
• înapoi - proprietățile CSS animate vor fi aplicate obiectului înainte ca animația să înceapă redarea.
• ambele - proprietățile CSS animate vor fi aplicate obiectului atât înainte, cât și după redarea animației;

Animație-umplere-mod: înapoi;

Proprietăți animatie-durata, animatie-functie-sincronizare, animație-întârziere funcționează în același mod ca proprietăți similare în tranzițiile CSS, despre care am scris mai devreme, așa că nu mă voi repeta.

Cu animații CSS puteți crea animații destul de complexe fără folosind JavaScript... Un exemplu izbitor sunt încărcările, adică elementele care arată că ceva se încarcă pe pagina ta. Aici sunt cateva exemple:

Modulul Motion Path

Modulul Motion Path CSS vă permite să creați mișcarea obiectelor de-a lungul unei căi prin proprietatea specială motion-path. Anterior, această animație putea fi realizată doar cu folosind SVG sau scripturi complexe.

Această specificație are 3 proprietăți:

• mișcare-cale;
• offset de mișcare;
• mișcare-rotație;

mişcare-cale- această proprietate vă permite să specificați punctele (coordonatele) de-a lungul cărora obiectul se va mișca. Sintaxa este aceeași cu atributul cale SVG.

Traseul de mișcare: cale („M 235,323 Q 412,440 365,615 Q 400,300 670,240 L 870,340 L 975,535 Q 730,600 630,535 z”);

offset de mișcare- această proprietate pune obiectul în mișcare de la punctul de început până la punctul final. Este nevoie fie de o lungime dublă, fie de un procent. Pentru ca obiectul să înceapă să se miște, trebuie să definiți o animație care va merge de la 0 la 100%.

@keyframes airplane-fly (0% (offset mișcare: 0;) 100% (offset mișcare: 100%;))

mișcare-rotație- această proprietate vă permite să specificați în ce parte se va deplasa obiectul înainte. Puteți specifica valoarea automată, inversă sau propria dvs. în grade ("-45deg", "30deg", etc.).

Mișcare-rotație: automat;

Din păcate, motion-path este suportat momentan doar în Chrome și Opera, dar să sperăm că și alte browsere le vor urma în curând exemplul, pentru că chestia este cu adevărat utilă.

Pentru cei care nu au înțeles încă cum funcționează, sau vor să-l înțeleagă mai bine, am făcut un exemplu (link către codeopen).

Din ce în ce mai mult pe multe pagina de destinație sau pagini promoționale, puteți găsi diverse efecte animaţie. La urma urmei, fac pagina mai interesantă și mai atractivă.

Practic, aceste efecte sunt setate fie pe un anumit eveniment (făcând clic sau trecând cu mouse-ul peste un element), fie în momentul derulării paginii. Cred că ați văzut astfel de site-uri când ați navigat prin pagină, diverse elemente apar lin și frumos.

Anterior, pentru a implementa aceste efecte, trebuia să folosești doar JS, dar dezvoltarea nu stă pe loc, iar odată cu lansarea CSS3, toate aceste efecte pot fi implementate pe acesta.

V această lecție vom cunoaște un instrument foarte interesant numit animate.css... Aceasta este deja CSS terminat foaie de stil, care are peste 50 de efecte diferite în arsenalul său, iar toate aceste efecte sunt implementate în CSS3.

Pentru a-l folosi, trebuie doar să setați elementul necesar o anumită clasă iar acestui element va fi aplicat un efect de animație. După cum am spus mai devreme, această animație este implementată în CSS3, astfel încât aceste efecte vor funcționa în toate browserele moderne.

Acum să aruncăm o privire mai atentă la animate.css.

Marcaj HTML de bază

Urmărește tutorialul video

• sări
• flash
• puls
• banda de cauciuc
• scutura
• leagăn
• se clătina
• bounceIn
• bounceInDown
• bounceInLeft
• bounceInRight
• bounceInUp
• bounceOut
• bounceOutDown
• bounceOutLeft
• bounceOutRight
• bounceOutUp
• fadeIn
• fadeInDown
• fadeInDownBig
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightBig
• fadeInUp
• fadeInUpBig
• fadeOut
• fadeOutDown
• fadeOutDownBig
• fadeOutLeft
• fadeOutLeftBig
• fadeOutRight
• fadeOutRightBig
• fadeOutUp
• fadeOutUpBig
• flipInX
• flipInY
• flipOutX
• flipOutY
• lightSpeedIn
• lightSpeedOut
• rotateIn
• rotateInDownLeft
• rotiți în jos la dreapta
• rotateInUpLeft
• rotateInUpRight
• rotateOut
• rotițiOutDownLeft
• rotiți în afară în jos la dreapta
• rotițiOutUpLeft
• rotateOutUpRight
• balama
• rollIn
• rola
• mareste
• zoomInDown
• zoomInStânga
• zoomInRight
• zoomInUp
• a micsora
• zoom OutDown
• zoomOutStânga
• zoomOutDreapta
• zoomOutUp
• slideInDown
• slideInLeft
• slideInRight
• slideInUp
• slideOutDown
• slideOutLeft
• slideOutRight
• slideOutUp

Animație fără sfârșit

Dacă ați făcut totul așa cum este descris mai sus, atunci în momentul în care pagina se încarcă, acest efect va fi aplicat elementului și gata, animația se va termina acolo.

Dar dacă doriți ca animația să continue fără oprire?

Pentru a face acest lucru, trebuie doar să adăugați încă o clasă pentru elementul nostru animat. Aceasta este o clasă - infinit.

Titlu

Setați animația când treceți cu mouse-ul peste un element

Urmărește tutorialul video

Toate exemplele descrise mai devreme setează animația imediat după încărcarea paginii, dar în practică acest lucru este rareori necesar. În practică, este foarte adesea necesar să setați animația atunci când treceți cu mouse-ul peste un element și, prin urmare, am dat mai jos cod gata această implementare.

HTML

HTML marcajul nostru s-a schimbat puțin, acum nu trebuie să setăm o clasă care este responsabilă pentru o anumită animație. Trebuie să specificăm această valoare în atribut special efect de date... Fiți atenți la acest lucru, acest lucru este foarte important.

Titlu

Iată un mic cod pentru jQuery care va urmări evenimentul trecerii mouse-ului peste element și în caz de apariție acest eveniment, scriptul îi va adăuga o clasă, a cărei valoare este scrisă în atribut efect de date... Prin adăugarea acestei clase, se va aplica animația.

Funcția animate (elem) (var efect = elem.data ("efect"); if (! Effect || elem.hasClass (efect)) return false; elem.addClass (efect); setTimeout (funcție () (elem.removeClass) (efect);), 1000);) $ (". animat"). mouseenter (funcție () (animare ($ (acest));));

Desigur, puteți schimba acest script după cum doriți, de exemplu, puteți schimba evenimentul din el mouseenter pe clic... Apoi, în acest caz, animația va avea loc nu în momentul în care mouse-ul este plasat peste element, ci în momentul clicului.

Realizarea de animație la derularea paginii

Urmărește tutorialul video

Și, în sfârșit, să ne uităm la un alt exemplu în care poți aplica cu ușurință animate.css.

Și anume, puteți seta diverse efecte pentru elemente atunci când derulați pagina. În aceste scopuri, pe lângă animate.css, avem nevoie de mai mult scenariu special wow.js.