Animație cu mișcare lină folosind CSS. Nouă exemple simple de animație CSS3

Animație CSS3 Oferă dinamism site-urilor. Dă viață paginilor web, îmbunătățind experiența utilizatorului. Spre deosebire de tranzițiile CSS3, crearea animației se bazează pe cadre cheie, care vă permit să redați și să repetați automat efectele pentru un anumit timp, precum și să opriți animația într-o buclă.

Animația CSS3 poate fi folosită pentru aproape toate elementele html, precum și pentru pseudoelementele:before și:after. Lista proprietăților animate este dată pe pagină. Când creați animații, nu uitați de posibilele probleme de performanță, deoarece modificarea unor proprietăți necesită o mulțime de resurse.

Introducere în animația CSS

Suport pentru browser

IE: 10.0
Firefox: 16,0, 5,0 -moz-
Crom: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Operă: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera mini: —
Browser Android: 44, 4.1 -webkit-
Chrome pentru Android: 44

1. Regula @keyframes

Crearea animației începe cu instalarea cadre cheie regulile @keyframes. Cadrele determină ce proprietăți vor fi animate la ce pas. Fiecare cadru poate include unul sau mai multe blocuri de declarații ale uneia sau mai multor perechi de proprietăți și valori. Regula @keyframes conține numele animației elementului, care leagă regula și blocul de declarare al elementului.

@keyframes shadow (de la (text-shadow: 0 0 3px black;) 50% (text-shadow: 0 0 30px black;) la (text-shadow: 0 0 3px black;) )

Cadrele cheie sunt create folosind cuvintele cheie de la și către (echivalentul valorilor 0% și 100%) sau folosind puncte procentuale, care pot fi specificate câte doriți. De asemenea, puteți combina cuvinte cheie și puncte procentuale. Dacă cadrele au aceleași proprietăți și valori, acestea pot fi combinate într-o singură declarație:

@keyframes muta ( de la, la ( sus: 0; stânga: 0; ) 25%, 75% (sus: 100%;) 50% (sus: 50%;) )

Dacă nu sunt specificate cadre 0% sau 100%, browserul utilizatorului le creează folosind valorile calculate (setate inițial) ale proprietății animate. Dacă două cadre cheie au aceiași selectori, cel următor îl va anula pe cel anterior.

Odată ce regula @keyframes este declarată, o putem face referire în proprietatea animație:

H1 (dimensiunea fontului: 3.5em; culoare: magenta închis; animație: umbră 2s ușurință infinită de intrare; )

Nu este recomandat să animați valori non-numerice (cu rare excepții), deoarece rezultatul în browser poate fi imprevizibil. De asemenea, nu ar trebui să creați cadre cheie pentru valorile proprietăților care nu au un punct de mijloc, cum ar fi valorile proprietăților culoare: roz și culoare: #ffffff , lățime: automat și lățime: 100px sau rază-chenar: 0 și chenar- raza: 50% (în acest caz, ar fi corect să specificați raza-chenar: 0%).

2. Nume animație nume-animație

Proprietatea specifică numele animației. Numele animației este creat în regula @keyframes. Este recomandat să folosiți un nume care să reflecte esența animației și puteți utiliza unul sau mai multe cuvinte legate între ele folosind un spațiu - sau caracterul de subliniere _. Proprietatea nu este moștenită.

Sintaxă

Div (nume animație: mymove;)

3. Durata animatiei animatie-durata

Proprietatea setează durata animației, setată în secunde sau milisecunde, valorile negative nu sunt permise. Nu moștenit. Dacă un element are mai multe animații specificate, puteți seta un timp diferit pentru fiecare listând valorile separate prin virgule.

Sintaxă

Div (animație-durată: 2s;)

4. Funcție de sincronizare animație-funcție de sincronizare

Proprietatea definește schimbarea vitezei de la începutul până la sfârșitul animației folosind funcții de sincronizare. Specificat folosind cuvinte cheie sau o curbă Bezier cubic-bezier(x1, y1, x2, y2) . Nu moștenit.

animatie-functie-sincronizare
Valori:
uşura	Caracteristica implicită, animația începe lent, accelerează rapid și încetinește la sfârșit. Corespunde cubic-bezier(0.25,0.1,0.25,1) .
liniar	Animația are loc uniform pe tot parcursul timpului, fără fluctuații de viteză. Corespunde cubic-bezier(0,0,1,1) .
ușurință	Animația începe lent și apoi se accelerează ușor la sfârșit. Corespunde cubic-bezier(0,42,0,1,1) .
uşurare	Animația începe rapid și încetinește ușor la sfârșit. Corespunde cubic-bezier(0,0,0.58,1) .
ușurință-in-out	Animația începe încet și se termină încet. Corespunde cubic-bezier(0,42,0,0,58,1) .
cubic-bezier(x1, y1, x2, y2)	Vă permite să setați manual valori de la 0 la 1. Puteți construi orice traiectorie a vitezei de schimbare a animației.
pas-start	Setează animația pas cu pas, împărțind animația în segmente, modificările apar la începutul fiecărui pas. Echivalent cu pașii (1, start) .
sfârşitul pasului	Animație pas cu pas, modificările apar la sfârșitul fiecărui pas. Echivalent cu pașii (1, sfârșit) .
pași(număr de pași,început|sfârșit)	O funcție de timp de pas care ia doi parametri. Numărul de pași este specificat printr-un număr întreg pozitiv. Al doilea parametru este opțional, specifică momentul în care începe animația. Odată cu startul valorii, animația începe la începutul fiecărui pas, cu valoarea finală la sfârșitul fiecărui pas cu o întârziere. Latența se calculează împărțind timpul de animație la numărul de pași. Dacă al doilea parametru nu este specificat, se utilizează valoarea implicită end.
iniţială	Setează valoarea proprietății la valoarea implicită.
moşteni	Moștenește valoarea proprietății de la elementul părinte.

Sintaxă

Div (animație-funcție de sincronizare: liniar;)

Animația pas cu pas poate fi folosită pentru a crea efecte interesante, cum ar fi textul imprimat sau un indicator de încărcare.

5. Animație cu întârziere animație-întârziere

Proprietatea ignoră animația pentru o anumită perioadă de timp, ceea ce face posibilă rularea fiecărei animații separat. O întârziere negativă începe animația dintr-un anumit punct din ciclul său, de exemplu. de la ora specificată în întârziere. Acest lucru vă permite să aplicați animație mai multor elemente defazate modificând numai timpul de întârziere.

Pentru ca animația să înceapă de la mijloc, trebuie să setați o întârziere negativă egală cu jumătate din timpul setat în animație-durată . Nu moștenit.

Sintaxă

Div (animație-întârziere: 2s;)

6. Repetați animația animation-iteration-count

Proprietatea vă permite să rulați animația de mai multe ori. O valoare de 0 sau orice număr negativ elimină animația din redare. Nu moștenit.

Sintaxă

Div (animație-iterație-număr: 3;)

7. Animație-regie

Proprietatea specifică direcția în care se repetă animația. Dacă animația se repetă o singură dată, atunci această proprietate nu are sens. Nu moștenit.

Sintaxă

Div (direcție de animație: alternativă;)

8. Scurtă înregistrare a animației

Toți parametrii de redare a animației pot fi combinați într-o singură proprietate - animație, listându-i separați printr-un spațiu:

Animație: animație-nume animație-durată animație-funcție de sincronizare animație-întârziere animație-iterație-număr animație-direcție;

Pentru a reda animația, este suficient să specificați doar două proprietăți - animation-name și animation-duration , proprietățile rămase își vor lua valorile implicite. Ordinea în care sunt listate proprietățile nu contează, singurul lucru este că timpul de execuție al animației-durata trebuie să vină înainte de întârzierea animației-întârziere.

9. Redarea animației animație-play-stare

Proprietatea controlează redarea și oprirea animației. Oprirea animației într-o buclă este posibilă folosind această proprietate într-un script JavaScript. De asemenea, puteți opri animația când treceți mouse-ul peste un obiect - state:hover . Nu moștenit.

Sintaxă

Div:hover (animație-play-stare: întrerupt;)

10. Starea elementului înainte și după redarea animației animation-fill-mode

Proprietatea determină ordinea în care stilurile definite în @keyframes sunt aplicate obiectului. Nu moștenit.

animație-umplere-mod
Valori:
nici unul	Valoare implicită. Starea elementului nu se schimbă înainte sau după redarea animației.
înainte	Odată ce animația se termină (după cum este determinată de valoarea animației-iterație-număr), animația va aplica valorile proprietăților în momentul în care se termină animația. Dacă animația-iterație-număr este mai mare decât zero, se aplică valorile pentru sfârșitul ultimei iterații finalizate a animației (nu valoarea pentru începutul iterației care urmează). Dacă animation-iteration-count este zero, valorile aplicate vor fi cele care pornesc prima iterație (la fel ca în animation-fill-mode: înapoi;).
înapoi	În perioada definită cu animation-delay, animația va aplica valorile proprietăților definite în cadrul cheie, care va începe prima iterație a animației. Acestea sunt fie valorile de la cadru-cheie (când direcția animație: normală sau direcția animației: alternativă), fie valorile cadru-cheie către (când direcția animației: inversă sau direcția animației: alternativă).

O mare parte din ceea ce ne aduce bucurie în animație provine din mutarea obiectelor în jurul ecranului. Efectele hover CSS atrag atenția utilizatorilor asupra conținutului, asupra unei anumite părți a interfeței și îmbunătățesc percepția generală a resursei.

Deplasarea poate fi puțin nebunească, așa:

Mișcarea poate să nu fie atât de evidentă. De exemplu, cea care apare când treceți mouse-ul peste unul dintre pătratele din figura de mai jos:

Browserul dvs. nu acceptă cadre inline sau este configurat în prezent să nu afișeze cadre inline.

În exemplele date, mișcarea este implementată folosind CSS. Atât animația, cât și tranzițiile CSS fac extrem de ușor trecerea de la static la mutare. Dar, în ciuda acestei simplități, există anumite nuanțe care trebuie luate în considerare pentru ca efectul de hover CSS să funcționeze fără probleme la hover. În acest articol vă voi povesti exact despre ele.

Transformare cu translate3d()

Când mutați un element, pozițiile sale verticale și orizontale se schimbă. Există mai multe proprietăți CSS care sunt utilizate pentru aceasta. Dar vreau să vă recomand să utilizați funcția translate3d a proprietății transform în locul marginii obișnuite , padding , left , top deoarece oferă o animație mai lină.

Funcția translate3d are trei argumente, dar mai întâi să ne uităm la cei responsabili pentru mutarea conținutului pe orizontală și pe verticală:

Argumentul X specifică mișcarea orizontală, Y – mișcarea verticală. De exemplu, dacă doriți să mutați conținutul cu 20 de pixeli la dreapta și în sus, funcția translate3d ar trebui să arate astfel:

Foo ( transform: translate3d(20px, 20px, 0px); )

Nu vom lua în considerare al treilea argument, care determină mișcarea de-a lungul axei Z. Deoarece suntem interesați de efectele CSS 2d-hover.

După cum puteți vedea, funcția translate3d nu este deosebit de complicată. În continuare, ne vom uita la cum să-l folosim în animația CSS pentru a crea mișcare.

Tranziție

Pentru a utiliza această proprietate într-o tranziție, trebuie să parcurgeți doi pași. Mai întâi trebuie să specificați transformarea ca proprietate care ar trebui să urmărească tranziția:

PictureContainer img (poziție: relativă; sus: 0px; tranziție: transformare .2s ease-in-out; )

După ce ați definit o tranziție, puteți seta proprietatea de transformare cu funcția translate3d:

PictureContainer img:hover ( transform: translate3d(0px, -150px, 0px); )

După cum se arată în exemplul de la începutul articolului, efectul de hover CSS atunci când treceți cursorul mouse-ului peste oricare dintre elemente face ca imaginea să se deplaseze în sus cu 150 de pixeli.

Animaţie

În cazul animației, asigurați-vă că cadrele cheie din @keyframes conțin o proprietate de transformare cu translate3d :

@keyframes bobble ( 0% ( transform: translate3d(50px, 40px, 0px); animation-timing-function: ease-in; ) 50% ( transform: translate3d(50px, 50px, 0px); animation-timing-function: ease -out; ) 100% ( transform: translate3d(50px, 40px, 0px); ) )

Exemplul din articol conține tot ceea ce aveți nevoie pentru a vedea cum funcționează efectul de hover CSS pentru aspectul tabelului.

Nu uitați de prefixe

Pentru ca marcajul să funcționeze în diferite browsere, asigurați-vă că utilizați prefixe de furnizor sau biblioteca --prefix-free pentru proprietatea de transformare.

Tranziții cu JavaScript

De asemenea, puteți crea animații în mișcare în JavaScript. Aceleași reguli se aplică aici. Mai întâi trebuie să setați poziția folosind transform translate3d , dar în JavaScript acest lucru este puțin mai complicat.

Fragmentul de cod necesar pentru aceasta arată astfel:

funcția getSupportedPropertyName(proprietăți) ( pentru (var i = 0; i< properties.length; i++) { if (typeof document.body.style] != "undefined") { return properties[i]; } } return null; } var transform = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"]; var item = document.querySelector("#theItem"); var transformProperty = getSupportedPropertyName(transform); if (transformProperty) { item.style = translate3d(someValueX, someValueY, 0px); }

Acest cod pare complicat deoarece folosim prefixe și verificăm pentru a se potrivi cu versiunea funcției de transformare utilizată.

De ce nu funcționează pentru noi să setăm poziția folosind marginea , sus , stânga etc.?

Dacă nu aveți un motiv anume pentru a face acest lucru, nu utilizați proprietățile CSS margin , padding , top , left , bottom sau right pentru a crea efecte de trecere cu mouse-ul. Deși acest lucru poate părea contraintuitiv. Lasă-mă să clarific...

Calcule inutile

Când modificați setul de valori pentru cele șase proprietăți CSS pe care tocmai le-am enumerat, browserul face calcule suplimentare despre modul în care acestea vor apărea în aspectul întregii pagini. Nu sunt împotriva utilizării acestor proprietăți pentru lucrul cu aspectul. Dar folosirea lor în animații sau tranziții și schimbarea valorilor de șaizeci de ori pe secundă este prea mult.

Puteți seta poziția elementului pe care îl mutați fie fix, fie absolut . Acest lucru va salva browserul de a calcula aspectul pentru întregul document. Dar în acest caz, browserul efectuează în continuare calcule pe elementul care se mișcă. Și rezultatul utilizării translate3d nu va fi neapărat identic cu rezultatul obținut folosind margine, padding etc. Mai mult, așa cum veți vedea în secțiunea următoare, acestea nu vor fi 100% identice.

Accelerarea hardware

Când avem de-a face cu afișarea elementelor pe ecran, calculele asociate se pot face folosind un procesor sau o placă video. Dar pentru a crea efecte de trecere CSS pentru aspectul tabelului, este mai bine să utilizați o placă video:

GPU-ul este proiectat doar pentru a gestiona sarcini legate de afișaj. În același timp, procesorul procesează un număr mare de sarcini diferite în paralel. Și pentru ca animația dvs. să se afișeze fără probleme, nu puteți neglija acest model. Diferența de netezime a afișajului animației poate să nu fie foarte vizibilă pe un computer desktop sau laptop puternic, dar se va manifesta în mod clar pe dispozitivele mobile. Din experiență personală, pot spune că pe aceste dispozitive, animațiile care folosesc CPU sunt mai agitate decât cele care folosesc GPU.

Cum să vă asigurați că animația în modul accelerat hardware utilizează GPU-ul? Aplică translate3d! Când transformați un element folosind translate3d, acesta este procesat prin GPU în browserele Webkit, cum ar fi Chrome și Safari ( care sunt instalate pe iPhone și iPad), în Internet Explorer 9/10 și, de asemenea, în cele mai recente versiuni de Firefox. Acest lucru oferă translate3d avantaje clare.

Ce zici de JavaScript?

În ceea ce privește efectele hover CSS create în JavaScript, unde toată interpolarea este gestionată de cod, nu știu de fapt dacă folosirea GPU-ului este atât de productivă. Dar folosește GPU pentru a seta tranziții JavaScript și animații CSS cu proprietatea translate3d.

Când utilizați JavaScript pentru a seta animația sau proprietățile de tranziție, interpolarea între punctele de început și de sfârșit ale animației este încă generată de browser. Cercurile albastre în mișcare pe care este posibil să le fi văzut la începutul acestui articol sunt dovada acestui lucru.

Dumnezeu să binecuvânteze transformarea!

Motivul pentru care transformarea este mai performantă este că nu afectează niciun alt element. Orice acțiuni pe care le efectuați se aplică unui singur element, iar browserul nu trebuie să reconstruiască întreaga fereastră. Modifică doar partea ecranului care conține conținutul în mișcare. Acest lucru nu depinde de dacă GPU-ul este implicat sau nu.

Am văzut asta recent tranziții- este doar o modalitate animatii proprietăți de stil din original inainte de final condiție.

Deci tranzițiile în CSS sunt specific tip 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 o funcție de timp.

Dar dacă vrei:

• a avea control asupra intermediar state?
• buclă animaţie?
• realizați diferite tipuri de animații pentru unu element?
• animați o anumită proprietate numai pe jumătate moduri?
• imita diverse funcții de timp pentru diferite proprietăți?

Animația în CSS vă permite să faceți 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 diferite scene (cadre cheie).

Proprietăți de animație

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

• animation-name : numele animației;
• animation-duration : cât durează animația;
• 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: dacă mișcarea merge în direcția opusă 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: 0.5s cubic-bezier(0.1,0.25,0.1,1) 0s infinit alternate ambele; )

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

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

• animation-name: bouncing (la fel ca numele keyframe-ului)
• 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)
• animation-iteration-count: infinit (se joacă la nesfârșit)
• direcția de animație: alternativă (merge înainte și înapoi)
• animation-fill-mode: ambele

@keyframes

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

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

De asemenea, puteți utiliza cuvintele cheie de la și către î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ă, vei 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 o animație, scrieți pur și simplu cuvântul cheie @keyframes cu ea Nume:

@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 asigură că animația se realizează 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 pe termen nelimitat.

animatie-nume

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

• la scris animații folosind @keframes ;
• la utilizare animație folosind proprietatea animation-name (sau proprietatea animation shorthand).

@keyframes indiferent ( /* ... */ ) .selector (animation-name: whatever; )

Similar cu numele de clasă CSS, numele animației poate include numai:

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

Numele nu poate începe cu un număr sau 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 a tranziției, funcțiile de sincronizare a animației pot utiliza Cuvinte cheie, cum ar fi liniar , ease-out sau pot fi definite folosind cele arbitrare curbe Bezier.

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

Valoare implicită: ușurință.

Deoarece animația în CSS utilizează cadre cheie, puteți seta liniar funcţie de timp şi simula curba Bezier specifică prin definirea multe foarte specifice cadre cheie. Consultați Bounce.js pentru animație avansată.

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ă nicio întârziere.

Util atunci când includeți mai multe animații în serie.

A, .b, .c ( animație: săritură 1 s; ) .b ( întârziere animație: 0,25 s; ) .c ( întârziere 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ânt 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 specifică dacă în ce ordine se citesc cadrele cheie.

• 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ă inainte deînceputul animației și după finalizarea acestuia.

La determinarea cadre cheie poate fi specificat reguli CSS, care va fi aplicat la diferiți pași de animație. Acum aceste reguli CSS pot se ciocnesc cu cei care aplicat deja la elemente animate.

animation-fill-mode vă permite să spuneți browserului dacă stiluri de animație De asemenea ar trebui aplicat dincolo de animație.

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ă.

Rezultatul acestei lecții funcționează în browserele Safari, Chrome, Opera, Firefox, începând cu versiunea 4 (unde vei vedea transformări, dar fără animație). De asemenea, folosind prefixul browserului -ms-, puteți vedea rezultate pozitive în IE, începând cu versiunea 9.

Pentru a implementa animația CSS, trebuie să setați setări speciale de transformare care vor răspunde la evenimentele mouse-ului. De asemenea, este necesar să specificați o funcție specială care va fi responsabilă de timpul de execuție al animației.

Pentru ca transformările să funcționeze în Firefox și Opera, pur și simplu înlocuiți prefixul -webkit cu -moz și -o. Pentru IE - la -ms.

1. Introducere în Transformările CSS

Transformările CSS sunt folosite pentru a schimba aspectul, rotația și alte transformări ale unui element. Toate aceste setări sunt setate în foi de stil obișnuite, iar când deschideți pagina, vedeți deja rezultatul final al transformării. Pentru a vedea transformarea în sine de la o vedere la alta (animație de transformare), puteți atașa un fel de eveniment la element (de exemplu, evenimentul mouseover);

În exemplul de mai jos, am plasat 4 div-uri absolut identice cu un chenar de 2px. Pentru a transforma aceste elemente în browsere care rulează pe webkit, adăugați prefixul -webkit-transform:

Fără aceste transformări, div-urile vor arăta exact la fel.

2. Animație

Pentru a anima transformările în browserele Webkit, puteți utiliza prefixul -webkit-transition. Demo-ul este prezentat mai jos:

Există 4 div-uri identice în fața ta. Pentru a începe animația, trebuie să mutați mouse-ul înăuntru/în afara. Cu toate acestea, fără JavaScript. Numai HTML și CSS.

Animația CSS poate fi aplicată nu numai transformărilor, ci și altor proprietăți, cum ar fi transparența, culoarea și multe altele. Acest lucru este demonstrat în exemplul următor. Un element este convertit în altul și invers:

Din nou, folosim doar HTML și CSS. În acest caz, modificați setările culoare-chenar, rază-chenar.

4. Transformări multiple pe un element

Pentru a aplica mai multe transformări la același element, pur și simplu enumerați setările separate printr-un spațiu. De exemplu:

Aceste setări, când treceți mouse-ul peste 1 secundă, vor schimba culoarea submeniului, îl vor roti și îi vor crește dimensiunea.

4. Animația în acțiune

Iată un alt exemplu interesant de combinare a diferitelor tipuri de transformări într-o singură animație:

Este posibil ca acest exemplu să nu funcționeze foarte bine în Safari 3 și versiunile anterioare ale Opera.

Caseta înconjurată de un cadru punctat care apare în timpul redării animației reprezintă poziția elementului div. Pur și simplu îl schimbăm și îi rotim conținutul. E simplu!

Pentru a crea animații mai complexe, trebuie să utilizați cadre cheie speciale.

5. Utilizarea diferitelor tipuri de animație

În acest exemplu, vom adăuga mai multe transformări de elemente, fiecare dintre ele va fi jucată într-o anumită perioadă de timp.

Când are loc un eveniment de trecere, pătratul albastru se va întoarce, își va schimba culoarea în roșu și se va muta din colțul din stânga sus în dreapta jos.

Primul lucru pe care probabil ar fi trebuit să-l observați este particularitatea mișcării pătratului. Acum nu este ascuțit, ci mai „curbat”. Toate datorită funcțiilor ease-out și ease-in.

De asemenea, rețineți că schimbarea culorii are loc înainte de rotație.

Trucul este că puteți împărți -webkit-transition în mai multe intrări:

#bloc ( ... fundal: albastru; ... -webkit-transition-property: stânga, sus, fundal, -webkit-transform; -webkit-tranziție-durata: 2s, 2s, 1s, 1s; -webkit-transition -funcție de sincronizare: ease-out, ease-in, linear, ease-in-out -webkit-tranziție-delay: 0, 0, 0, 1s ... ) #stage:hover #block ( stânga: 100px ; partea de sus: 100px;

6. Evenimentul unui element îl transformă pe altul

Mulți oameni vor fi probabil interesați de funcționalități similare: făcând clic pe un element provoacă transformarea altuia. În CSS, acest lucru poate fi realizat folosind selectoarele >, + și ~.

Iată un exemplu relevant:

În acest exemplu, am folosit semnul + pentru a interacționa cu #box1 și #box2. ~ poate fi folosit pentru a accesa elemente care sunt undeva departe de elementul care așteaptă evenimentul.

#box2 ( poziție: absolut; stânga: 120px; ... fundal: albastru; ... ) #box1:hover + #box2 ( -webkit-transform: rotire(360deg); -moz-transform: rotire(360deg); -o-transform: rotire(360deg); -ms-transform: rotire(360deg);

În același timp, putem anima primul bloc:

Singurul dezavantaj al acestor exemple este că nu funcționează (sau funcționează strâmb) în versiunile anterioare ale browserelor.

Mulțumim lui Niall pentru tutorialul sugerat!

Animația CSS3 este folosită pe scară largă. Este timpul ca chiar și cei mai începători constructori de site-uri web să înțeleagă ce este animația CSS și cum să o creeze. S-ar putea să credeți că animația CSS3 se referă la a face blocurile să se miște și arată ca un desen animat. Dar animația CSS nu este doar despre mutarea unui element dintr-un punct în altul, ci și despre distorsiuni și alte transformări. Pentru a clarifica acest lucru chiar și pentru începători, am notat totul pas cu pas.

1. Proprietățile de bază ale animației CSS3

Un mic bloc teoretic din care veți înțelege ce proprietăți CSS3 sunt responsabile pentru animație, precum și ce valori pot lua.

• animatie-nume— un nume unic pentru animație (cadre cheie, despre ele vom vorbi mai jos).
• animatie-durata— durata animației în secunde.
• animatie-functie-sincronizare— curba de schimbare a vitezei de animație. La prima vedere este foarte neclar. Este întotdeauna mai ușor să arăți cu un exemplu și le vei vedea mai jos. Poate lua următoarele valori: liniar | ușurință | ease-in | ease-out | cubic-bezier(n,n,n,n) .
• animație-întârziere— întârziere în secunde înainte de începerea animației.
• animație-iterație-număr— numărul de repetări de animație. Poate fi specificat fie pur și simplu ca număr, fie puteți specifica infinit și animația va rula la nesfârșit.

Iată doar proprietățile de bază, care sunt mai mult decât suficiente pentru a crea prima animație CSS3.

Ultimul lucru pe care trebuie să-l cunoaștem și să înțelegem din teorie este cum să creăm cadre cheie. Acest lucru este, de asemenea, ușor de făcut și se face folosind regula @keyframes, în cadrul căreia sunt specificate cadrele cheie. Sintaxa pentru această regulă este:

Deasupra setăm primul și ultimul cadru. Toate stările intermediare vor fi calculate AUTOMAT!

2. Exemplu real de animație CSS3

Teoria, ca de obicei, este plictisitoare și nu întotdeauna clară. Este mult mai ușor să vezi totul folosind un exemplu real, dar cel mai bine este să o faci singur pe o pagină HTML de test.

Când înveți un limbaj de programare, de obicei scrii un program „Bună, lume!”, din care poți înțelege sintaxa acestui limbaj și alte lucruri de bază. Dar nu studiem un limbaj de programare, ci un limbaj de descriere a aspectului unui document. Prin urmare, vom avea propriul nostru „Bună, lume!”

Iată ce vom face, de exemplu: hai să avem un fel de bloc