Exemple de animație Css3. Inel dublu animat

Salutare tuturor. Recent am dat peste o serie de tutoriale video foarte utile și interesante pe tema „ Animație CSS". Dar asta e ghinion, toate videoclipurile erau deschise limba engleză, și, probabil, nu orice designer de layout cunoaște limba engleză la un nivel suficient pentru a înțelege și stăpâni întregul informatie necesara... Prin urmare, am decis să vă traduc aceste lecții (sau mai bine zis, să fac o traducere gratuită). Nu este nevoie să mulțumești. Asa de:

1. Animație CSS. Introducere + proprietate de tranziție(Acest articol)
2. Animație CSS. Cadre cheie - în curând
3. Când și de ce să folosiți animațiile CSS? - va fi in curand

Ce este animația CSS?

Înainte să vă spun cum să faceți animații CSS și de ce aveți nevoie de ele, aș dori mai întâi să vă explic, ce s-a întâmplatAnimație CSS, da o definitie sau ceva.

Animația pe web are două idei principale. Prima idee este reînvie ceva... Ești ca Dr. Frankenstein. Ai un monstru fără viață și îi dai viață. Al doilea este vizualizarea miscarii... Iar cuvântul cheie aici este „mișcare”.

Cum se anime?

Există două instrumente principale în CSS pe care le putem folosi pentru a muta elemente pe o pagină web. Prima (despre care vom vorbi mai târziu astăzi) este proprietatea tranziție... În primul rând, cu ajutorul lui creăm animații în CSS. Al doilea instrument este proprietatea animație asociată cu cadre cheie(@keyframes - keyframes). Vom explora acest instrument mai detaliat în următorul tutorial, dar acum vom arunca o privire asupra proprietății de tranziție CSS. Și apoi vom vorbi despre ce să animem pe pagină (când utilizatorul are nevoie) și ce să nu animem (când animația pare stupidă și nepotrivită) pe baza experienței utilizatorului (UX).

Proprietatea de tranziție CSS - parametri și valori

Sintaxă

În primul rând, să aruncăm o privire la modul în care este citită această proprietate și să defalcăm sintaxa acesteia. Scriem această proprietate astfel:

tranziție: [proprietate] [durată] [functie de sincronizare] [întârziere] ;

tranziție: înălțime 1s ease-out 0,2s;

Atribuim această proprietate elementului pe care dorim să-l animem. Acest element devine neted tranziție(sau treptat) între mai multe dintre stările sale (de exemplu, o înălțime de 100 de pixeli și o înălțime de 200 de pixeli). Și cum va arăta asta tranziție(din engleză tranziție), va depinde de parametrii pe care îi dăm.

Primul parametru (valoarea) proprietății de tranziție este altul proprietate elementul care este animat (de exemplu, înălţime).

Al doilea parametru este durata (durata) animației, adică cât timp va dura un element pentru a trece de la o stare la alta (de exemplu, 2s sau 2000ms).

Al treilea parametru este functie de sincronizare [sincronizarefuncţie] (funcția ising [ relaxareafuncţie]). Cum este distribuită intensitatea animației de-a lungul timpului. De exemplu, o animație poate începe brusc, apoi poate încetini și încheia fără probleme tranziția. Poate fi folosit ca cuvinte cheie (de exemplu, uşura,uşura-în-afară,liniar) și funcțiile cubului Bezier (de exemplu, cub-bezier (0,17, 0,67, 0,83, 0,67)). Puteți personaliza ușor și convenabil cubul Bezier pe această resursă http://cubic-bezier.com, precum și funcția pași pentru a crea animație cadru cu cadru (pas cu pas).

Și în sfârșit, parametrul întârziere... Întârzierea animației este perioada de timp pe care trebuie să o așteptați înainte ca animația (în cazul nostru, tranziția) să înceapă.

Exemplu de animație de tranziție CSS

Să aruncăm o privire la acest exemplu de animație CSS:

tranziție: opacitate 300ms ease-in-out 1s;

Aici vom anima doar proprietatea opacitate(opacitate). Aceasta înseamnă că dacă elementul pe care urmează să-l animam are alte proprietăți, cum ar fi înălțimea, lățimea sau culoarea, și chiar dacă aceste proprietăți diferă în conditii diferite element, atunci tranzitie lina(animație) va avea doar proprietăți de opacitate... Intelegi?

In loc de proprietate specifică puteți folosi și cuvântul cheie „ toate". Aceasta înseamnă că vom anima absolut toate proprietățile elementului care au fost modificate în noua stare a elementului (nu doar opacitatea) și care pot fi animate deloc. Pentru că, după cum știți, nu toate proprietățile pot fi animate. Dar mai multe despre asta mai târziu.

Al doilea parametru ( 300 Domnișoară) ne spune că animația va dura doar 300 de milisecunde. Adică, elementul va apărea rapid sau dizolvat rapid, în funcție de valorile proprietăților în cele două stări ale sale.

Funcția de sincronizare ( uşura-în-afară) al treilea parametru va face începutul și sfârșitul animației mai fluide.

Întârziere ( 1 s) arată cât de târziu ar trebui să fie animația înainte de a fi declanșată.

În general, aceasta este formula pentru modul în care vom scrie animația de tranziție. Aceasta este sintaxa. În orice caz, puteți adăuga mai multe [proprietăți] de tranziție pentru un element. De exemplu, puteți anima cu parametri diferiți modificarea înălțimii și lățimii elementului. Pentru a face acest lucru, în proprietatea de tranziție, în loc de punct și virgulă la sfârșit, puneți doar o virgulă și scrieți parametrii pentru încă o proprietate. Și nu uitați să puneți un punct și virgulă la sfârșit după aceea pentru ca acesta să funcționeze.

Ce poate fi animat în CSS?

Până acum am discutat doar despre sintaxa proprietății de tranziție. Acum să vorbim despre proprietăți, pe care le putem anima și pe care nu. Pentru că există unele lucruri care pur și simplu nu au sens să fie animate, iar unele proprietăți sunt pur și simplu imposibil de animat.

Proprietăți animate

Luați, de exemplu, proprietăți precum:

1. marimea fontului;
2. culoare de fundal;
3. lăţime;
4. stânga (cât de departe de partea stângă poate fi mutat elementul [poziționat]...

Evident, are sens să animam aceste proprietăți. Dacă modificați valorile acestora, elementul va fi schimbat vizual. Dacă modificați dimensiunea fontului de la, să zicem, 14 la 28 de pixeli, veți vedea fontul mărit fără probleme, a existat o animație care a durat un timp. Animația are întotdeauna sens dacă valorile proprietăților sunt valori clare (cel mai adesea numerice). Dacă măriți dimensiunea fontului la 100 de pixeli, atunci puteți vedea clar creșterea literelor. Se poate observa și schimbarea lină a culorii de fundal [deoarece culoarea de pe web are un cod numeric, de exemplu, roșu rgb (255,0,0)]. Aceste proprietăți sunt animabile.

În general, amintiți-vă, dacă vă imaginați că este animat, atunci poate fi animat. Cel mai adesea funcționează.

Proprietăți neanimabile

Și iată o listă de proprietăți care nu pot fi animate (exemplu):

1. afişa;
2. familie de fonturi;
3. pozitia...

Acestea sunt câteva dintre ele pe care le-am luat ca exemplu, astfel încât să puteți înțelege diferența dintre proprietățile CSS animate și neanimate.

Să facem expoziție. Vă puteți imagina cum se schimbă între " afişa:bloc; "și " afişa:in linie-bloc;"? Cum se poate schimba fără probleme aspect element între " poziţie:relativ;" și " poziţie:absolut;"? Nu, desigur, elementul va arăta diferit atunci când aceste proprietăți sunt modificate. Dar cum vă puteți imagina tranziție? Nu poți face asta. Dreapta? Nu vă puteți imagina transformarea fontului Helveticaîn font Georgia, fiecare scrisoare, pur și simplu nu va funcționa. Puteți schimba aceste fonturi, dar se vor schimba brusc, nu se va întâmpla nicio animație.

Performanța animației în CSS

În general, multe proprietăți sunt animate, dar unele nu. Acum să decidem care dintre proprietățile animabile sunt mai bune pentru animare și care sunt mai rele. Va merge despre performanță. Am atins performanța, deoarece animația este un proces care necesită mult resurse.

În general, iată lucrurile care funcționează cel mai bine pentru animație:

1. Poziţionarea pe pagină
2. Scalare
3. Rotație
4. Transparenţă

În plus, primele trei elemente din această listă sunt toți parametri proprietăți de transformare(traducere, scalare, rotire). Poziționarea are loc de-a lungul axelor X și Y.

Dacă decideți să animați orice altceva, riscați să nu obțineți o tranziție lină și lină la 60 de cadre pe secundă. Paul Lewis și irlandez

Și tocmai asta ne interesează atunci când vorbim despre performanța animației. În general, cele mai potrivite proprietăți pentru animație sunt transforma siopacitate... Când animați altceva, fps-ul animației poate scădea mult sub 60fps.

Să rezumam acest punct după cum urmează. Încercați să evitați redesenarea elementelor de pe pagina web și animarea elementelor care sunt greu de redat de browser (de exemplu, umbre).

Cum animez în CSS?

Acum să ne dăm seama cum să începem animația. Ce trebuie făcut pentru ca elementul să înceapă să se anime. Cu alte cuvinte, cum să faci animație înCSS.

Nu este greu și sunt multe căi diferite... Dar sunt 2 principale pe care trebuie să le stăpânești fără greșeală. Prima cale este animație când treceți cu mouse-ul peste un element(pseudo-clasă: hover). Treceți cu mouse-ul peste un element și animația este declanșată. Astfel, puteți anima elementul în sine sau oricare dintre el. elemente copil... Apoi vă voi arăta cum funcționează. A doua cale este schimbarea clasei unui element... Adică ai element regulat, îi schimbați (sau adăugați) clasa la o clasă care are stiluri complet diferite. Dacă adăugați o clasă, va avea loc animația, iar dacă eliminați clasa, va avea loc animația inversă. Acest mod bun pentru a anima meniuri sau meniuri derulante.

Postfaţă

Am acoperit tot ce avem nevoie pentru a crea animație CSS pur... Ne vom ocupa foarte curând exemple practice, și puțin mai târziu - exemple foarte interesante.

Ai citit până la capăt?

A fost de ajutor articolul?

Nu chiar

Ce anume ți-a displăcut? A fost articolul incomplet sau fals?
Scrieți în comentarii și promitem să ne îmbunătățim!

Această colecție conține cele mai bune și de cea mai bună calitate cipuri CSS. Aici puteți găsi demonstrații și tehnici diverse și uimitoare de la designeri și designeri de layout celebri care încearcă să demonstreze că acum este posibil să faceți aproape totul numai în CSS pur. Tot aici găsești câteva lecții în care este descris în detaliu modul de realizare a unei astfel de creații. Sper că această colecție vă va fi de folos.

CSS nori 3D

În această demonstrație puteți crea și edita nori fantezi în 3D. Aceste nori CSS ne arată clar că posibilitățile tehnologiilor web sunt aproape nesfârșite.

Logo-uri CSS pure

Acestea sunt exemple de logo-uri realizate numai în CSS pur. Gândiți-vă, nu au fost folosite imagini în creație. E doar ceva.

Alfabet cu animație CSS

Excelent și artistic exemplu folosind CSSîn alfabet

Navigare 3D pentru site

Bară de navigare simplă, dar foarte elegantă pentru un site web, bineînțeles realizată doar cu CSS3. fără imagini sau scripturi.

Doodle Google cu CSS

Unul dintre multele doodles de la motor de căutare google realizat în CSS. Acesta este un exemplu grozav utilizare de calitate Animații CSS

Glisor

Un glisor bine făcut pentru imagini. Plus 4 exemple în demo.

Inel dublu animat

Animație frumoasă și inel multicolor cu nu puternic cod mare CSS

Estompare pe CSS

Mi se pare ca filtrul este foarte necesar, mai ales ca este facut pe CSS pur. folosind estomparea, puteți atrage atenția utilizatorului asupra unui anumit punct.

Ghidul definitiv pentru Flexbox

Acest articol este despre casetele flexibile receptive. Vorbește complet despre aceste blocuri, deși articolul este în engleză.

Meniu CSS3 colorat și animat

Frumos meniu drop-down pentru site cu pictograme. Un mare plus este că se face în întregime în CSS.

filtre CSS

Material englezesc de calitate despre care vorbește aplicarea CSS filtre pe imagini.

Forme CSS

Postează despre Forme CSS cu numeroase exemple

Bare de progres CSS

O lecție despre cum să creați bare de progres elegante cu CSS pur și animație. De asemenea, puteți vedea un exemplu și puteți descărca sursele.

Animație - Animate.css

Cel mai popular proiect de animație CSS de pe Internet astăzi. Și probabil cel mai simplu și de cea mai înaltă calitate, și, de asemenea, gratuit.

Indicatori de încărcare - Spinkit

Sincer să fiu, acești indicatori au fost deja îndepliniți pe blog, dar mi se pare că ar trebui să vi se arate din nou. Deoarece aceștia sunt cei mai frumoși indicatori CSS de pe Internet.

Butoane

Acum butoanele pornite CSS deja greu de surprins, dar este o opțiune destul de decentă

Generator pentru crearea comutatoarelor

Mic și internet de înaltă calitate aplicație cu care poți crea întrerupătoare frumoase pentru utilizare pe site.

Sfaturi instrumente

Bibliotecă CSS cu indicații gratuite - Hint.css

Scheme de culori

Scheme de culori pentru persoanele cărora nu le place să caute coduri

Animație CSS3 face site-urile web dinamice. 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 aplicată aproape tuturor elementelor html, precum și pseudo-elementelor: înainte și: după. Lista proprietăților animate este dată pe pagină. Când creați animație, nu uitați de posibile probleme 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-
Crom pentru Android: 44

1. Regula @keyframes

Animația începe cu instalarea personal cheie regulile @keyframes. Cadrele determină ce proprietăți în care pas vor fi animate. 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 de animație al elementului care leagă regula și blocul de declarare a elementului.

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

Cadrele cheie sunt create folosind Cuvinte cheie de la și către (echivalent cu 0% și 100%) sau în puncte procentuale, care pot fi setate de câte ori doriți. De asemenea, puteți combina cuvinte cheie și puncte procentuale. Dacă ramele 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%, atunci browserul utilizatorului le creează folosind valorile calculate (setate inițial) ale proprietății animate. Dacă două cadre cheie au aceiași selectori, atunci următorul va anula acțiunea celui precedent.

După ce regula @keyframes este declarată, ne putem referi la ea în proprietatea animație:

H1 (dimensiune font: 3,5 em; culoare: magenta închis; animație: umbră 2s ușurință infinită de intrare;)

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

2. Numele animației-animație

Proprietatea setează 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, în timp ce puteți utiliza unul sau mai multe cuvinte conectate între ele folosind un spațiu - sau un simbol sublinia _. 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, valori negative nu sunt permise. Nu moștenit. Dacă este specificată mai mult de o animație pentru un element, atunci puteți seta 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 determină schimbarea vitezei de la începutul până la sfârșitul animației folosind funcții temporare. Specificat folosind cuvinte cheie sau cubic-bezier (x1, y1, x2, y2). Nu moștenit.

Sintaxă

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

Prin intermediul animație pasă poți crea efecte interesante cum ar fi tastarea textului sau o bară de progres 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ă începerea fiecărei animații individual. O întârziere negativă începe animația dintr-un anumit punct din ciclul său, de exemplu. de la ora indicată în întârziere. Acest lucru permite ca animațiile să fie aplicate mai multor elemente defazate prin modificarea doar a timpului de întârziere.

Pentru a începe animația la mijloc, trebuie să setați o întârziere negativă egală cu jumătate din timpul setat în durata animației. Nu moștenit.

Sintaxă

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

6. Animație iterație-iterație-număr

Proprietatea permite animației să ruleze 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. Direcția de animație direcția de animație

Proprietatea stabilește direcția în care se repetă animația. Dacă animația se repetă o singură dată, atunci această proprietate este lipsită de sens. Nu moștenit.

Sintaxă

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

8. Înregistrare scurtă de animație

Toți parametrii de redare a animației pot fi combinați într-o singură proprietate - animație, listând-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 - animație-nume și animație-durată, restul proprietăților vor lua valori implicite. Ordinea în care sunt listate proprietățile nu contează, singurul lucru este timpul de execuție animatie-durata trebuie să vină întotdeauna înainte de întârzierea animației.

9. Animație-play-stare redare animație

Proprietatea controlează redarea și oprirea animației. Oprirea animației în interiorul unei bucle este posibilă folosind această proprietate în Script JavaScript... De asemenea, puteți opri animația când treceți cu mouse-ul peste un obiect - stare: 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.

Mulți vizitatori s-au întrebat cum să folosească biblioteca Animate.css în practică. În realitate, totul se întâmplă destul de simplu, trebuie să parcurgeți o singură dată toate etapele și apoi, prin analogie, să repetați unele acțiuni.

1. Mai întâi trebuie să descărcați și să conectați biblioteca. Există trei opțiuni.

• Versiunea completa . Conține mai mult de trei mii de linii de cod, cu o dimensiune de aproximativ 60 KB. Este foarte potrivit pentru prima etapă de familiarizare cu animația în general, deoarece vă permite să aruncați o privire asupra modului în care funcționează totul.
• Versiunea ambalată (obscurcată spunând limbaj profesional). Nu există file, spații și întreruperi de linie în fișierul css. Din acest motiv, dimensiunea fișierului este redusă de o dată și jumătate, dar devine dificil să citiți codul.
• Efecte selective. Este cel mai potrivit pentru majoritatea sarcinilor, deoarece vă permite să specificați numai efectele care vă plac, scăpând de cele inutile.

2. Pentru a aplica efectul de animație la elementul dorit, adăugați-i două clase - animat și o clasă cu numele efectului, să spunem fadeInDown (vezi lista tuturor efectelor și numele acestora). De exemplu, să presupunem că doriți să adăugați pâlpâire la toate imaginile dintr-o pagină. În HTML, scrieți următoarele:

Dacă site-ul folosește jQuery, atunci adăugarea de clase este simplificată și se face prin JavaScript.

3. Animația în sine se pornește automat când pagina este încărcată. Acest lucru este util pentru mesajele pop-up menite să atragă atenția utilizatorului (exemplul 1).

Exemplu 1. Mesaj pop-up

Pentru ca efectul să fie declanșat atunci când cursorul mouse-ului trece peste un element, trebuie să utilizați JavaScript. De exemplu, luați în considerare imaginile care se mișcă atunci când treceți cursorul peste ele cu cursorul mouse-ului. Accesați eticheta adăugați clasa animată și includeți jQuery (exemplul 2).

Exemplul 2. Galerie

V acest exemplu când treceți cu mouse-ul peste imaginea animată, se adaugă o altă clasă de respingere; dacă cursorul este eliminat, atunci clasa de respingere este, de asemenea, eliminată.

4. În cele din urmă, puteți personaliza animația după bunul plac, modificând viteza animației, precum și setând timpul de întârziere prin CSS. Ambele sunt opționale și se aplică după cum este necesar.

Animat (-webkit-animation-duration: .6s; -o-animation-duration: .6s; -moz-animation-duration: .6s; animation-duration: .6s; -webkit-animation-delay: 1s; -o -animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s;)

Salutare dragi cititori. În această zi, să vorbim despre, destul de mult, lucru interesant precum animația CSS. Adică această animație a elementelor se face doar cu ajutorul stilurilor și nu se folosesc scripturi aici.

După cum puteți vedea, aici există un atribut : planează care schimbă stilul de fundal la hover, în unele exemple ar trebui să fie necesar.

Schimbarea lină a culorii elementului la trecerea cu tranziție

# caseta1 (
margine-jos: 5px;
culoare de fundal: #ccc;

umplutură: 10px;
text-align: centru;
lățime: 200px;
înălțime: 100px;

text-indent: 0px;
chenar: 1px solid # 888;
-moz-tranziție: culoare de fundal 0.8s 0.1s ușurință;
-o-tranziție: culoare de fundal 0.8s 0.1s ușurință;
-webkit-tranziție: fundal-culoare 0.8s 0.1s ușurință;
cursor: pointer;)

# caseta 1 : planează {
culoare de fundal: # 97CE68;
culoare: # 333;
}

După cum puteți vedea, am realizat această animație folosind atributul tranziție... Aici puteți schimba viteza animației în secunde, în în acest caz costă 0,8 secunde până când culoarea se schimbă complet la trecerea cu mouse-ul și 0,1 secunde înainte ca animația să înceapă după trecerea cu mouse-ul și îndepărtarea cursorului. (Ne pare rău pentru puzzle :-)) Această valoare poate fi schimbată după cum aveți nevoie.

Culoarea de fundal la trecerea cursorului este setată ca atribut : planează, este necesar aici, altfel animația nu va funcționa.

Redimensionarea unui element

# caseta2 (
margine-jos: 5px;
culoare de fundal: #ccc;
culoare: # 333;

umplutură: 10px;
text-align: centru;
lățime: 200px;
înălțime: 100px;

text-indent: 0px;
chenar: 1px solid # 888;
-moz-tranziție: toate cele 1 liniare;
-o-tranziție: toți 1s liniare;
-webkit-tranziție: toate cele 1 liniare;
cursor: pointer;)

# caseta 2 : planează {
culoare de fundal: # 97CE68;
culoare: # 000;
latime: 150px;
înălțime: 50px;
}

În acest exemplu, am realizat o redimensionare lină a blocului la hover. Valoare standard 200x100, iar magnitudinea hoverului este 150x50, care este setată de atribut : planează.

Aici puteți schimba și blocul doar în lățime sau înălțime, trebuie doar să faceți : planeazășterge lăţime:- blocul se schimba doar in inaltime, înălţime:- blocul se schimba doar in latime.

De asemenea, puteți modifica rata de schimbare. În acest caz, este 1s.

Răsucirea obiectului

# caseta3 (
margine-jos: 5px;
culoare de fundal: #ccc;
culoare: # 333;

umplutură: 10px;
text-align: centru;
lățime: 200px;
înălțime: 100px;

text-indent: 0px;
chenar: 1px solid # 888;
-moz-tranziție: toate 1s 0.1s ease-in;
-o-tranziție: toate 1s 0.1s ease-in;
-webkit-tranziție: toate 1s 0.1s ease-in;
cursor: pointer;)

# caseta 3: hover (
culoare de fundal: # 97CE68;
culoare: # 000;
-webkit-transform: rotire (360deg);
-moz-transform: rotire (360deg);
-o-transform: rotire (360deg);
}

Răsucirea are loc folosind transformași tranziție... În acest caz, obiectul se rotește în sensul acelor de ceasornic la 360 de grade cu o viteză de o secundă. Dacă doriți ca blocul să se rotească în sens invers acelor de ceasornic, transforma valoarea trebuie pusă - (minus). Desigur, gradul de rotație poate fi modificat.

Măriți și micșorați ușor un obiect

# caseta4 (
margine-jos: 5px;
culoare de fundal: #ccc;
culoare: # 333;
umplutură: 10px;
text-align: centru;
lățime: 200px;
înălțime: 100px;

text-indent: 0px;
chenar: 1px solid # 888;
-moz-tranziție: toate cele 3 ease-out;
-o-tranziție: toate cele 3 ease-out;
-webkit-tranziție: toate cele 3s ease-out;
cursor: pointer;)

# caseta4: hover (
culoare de fundal: # 97CE68;
culoare: # 000;
-webkit-transform: scara (2);
-moz-transforma: scara (2);
-o-transforma: scara (2);
}

În acest exemplu, blocul este dublat fără probleme. Această valoare este expusă transforma: scară (2)... Dacă setați valoarea la 1,5, respectiv, creșterea blocului va fi de 1,5 ori.

În același mod, poți reduce dimensiunea bloc, de exemplu, pune valoarea 0,5.

Comutare lină în jos

# caseta5 (
margine-jos: 5px;
culoare de fundal: #ccc;
culoare: # 333;
umplutură: 10px;
text-align: centru;
lățime: 200px;
înălțime: 100px;

text-indent: 0px;
chenar: 1px solid # 888;
-moz-tranziție: toate cele 1 ease-in-out;
-o-tranziție: toate cele 1 ease-in-out;
-webkit-tranziție: toate cele 1 ease-in-out;
cursor: pointer;)

# caseta 5: hover (
culoare de fundal: # 97CE68;
culoare: # 000;
-webkit-transform: translate (0.50px);
-moz-transform: translate (0.50px);
-o-transform: translate (0.50px);
}

Aici mișcarea este dată în pixeli. În acest caz (0,50px). De asemenea, puteți face blocul să se miște în sus cu această valoare de 0, -50px. Sau în diagonală în jos 50px, 50px. Într-un cuvânt, blocul poate fi făcut să se mute oriunde.

Asta e practic tot ce am vrut să spun. Nu, nu toate :-) Am uitat să vă reamintesc că asta Animație CSS poate fi aplicat oricăror obiecte de pe site: imagini, text, titluri, pictograme etc. Pentru link-uri, o schimbare lină de culoare este perfectă, după părerea mea este foarte frumoasă. :-)

Și totuși, această informație ne-a fost împărtășită de site-ul shpargalkablog.ru. Pentru care îi mulțumesc mult.

Acum asta e totul sigur :-) Ne vedem curând, prieteni.