Nouă exemple simple de animație CSS3. Animarea fără probleme a obiectelor folosind numai CSS (5 exemple)

Bună ziua, dragi cititori. În această zi, să vorbim despre un lucru destul de interesant numit animație CSS. Adică, această animație a elementelor se face numai folosind stiluri și nu sunt folosite scripturi aici.

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

Schimbați ușor culoarea unui element la trecerea cu mouse-ul folosind tranziția

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

umplutură: 10px;
text-align: centru;
latime: 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;)

#caseta1 :planare {
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ă la schimbare completă culorile când treceți cu mouse-ul și cu 0,1 secunde înainte ca animația să funcționeze după trecerea cu mouse-ul și eliminarea 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 :planare, este necesar aici, altfel animația nu va funcționa.

Redimensionarea unui element

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

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

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

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

În acest exemplu am reușit schimbare lină dimensiunea blocului la hover. Valoarea standard este 200 pe 100, iar valoarea hoverului este 150 pe 50, care este specificată de atribut :planare.

Aici puteți schimba și blocul doar în lățime sau înălțime, trebuie doar să faceți :planareșterge lăţime:— blocul se modifică numai în înălțime, înălţime:— blocul se modifică numai în lățime.

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

Torsiunea obiectului

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

umplutură: 10px;
text-align: centru;
latime: 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;)

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

Torsiunea 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 setată la - (minus). Desigur, gradul de rotație poate fi modificat.

Mărirea și micșorarea fără probleme a unui obiect

#box4 (
margine-jos: 5px;
culoare de fundal: #ccc;
culoare: #333;
umplutură: 10px;
text-align: centru;
latime: 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 3 ease-out;
cursor: pointer;)

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

În acest exemplu, blocul crește ușor în dimensiune de 2 ori. Această valoare este setată transforma: scară(2). Dacă setați valoarea la 1,5, blocul va fi mărit de 1,5 ori.

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

Comutare lină în jos

#box5 (
margine-jos: 5px;
culoare de fundal: #ccc;
culoare: #333;
umplutură: 10px;
text-align: centru;
latime: 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;)

#box5: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 specificată în pixeli. În acest caz (0,50px). De asemenea, puteți face ca blocul să se ridice 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 totul :-) Am uitat să vă reamintesc că această animație CSS poate fi aplicată oricăror obiecte de pe site: imagini, text, titluri, pictograme etc. Pentru linkuri, o schimbare lină de culoare este perfectă, după părerea mea, este foarte frumoasă. :-)

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

Asta e totul sigur acum :-) Ne vedem curând, prieteni.

Această colecție conține cele mai bune și de cea mai înaltă calitate funcții CSS. Aici puteți găsi exemple și tehnici demonstrative diverse și uimitoare de la designeri și designeri de layout celebri care încearcă să demonstreze că acum este posibil să faceți aproape totul folosind doar CSS pur. De asemenea, puteți găsi aici câteva lecții care vă spun în detaliu cum să realizați o astfel de creație. Sper că această colecție vă va fi de folos.

CSS nori 3D

În această demonstrație veți putea să creați și să editați nori fantastici în 3D. Aceste nori CSS ne arată clar că posibilitățile tehnologiilor web sunt aproape nelimitate.

Logo-uri CSS pure

Acestea sunt exemple de logo-uri realizate numai cu CSS pur. Gândește-te la asta, nu au fost folosite imagini la crearea sa. E doar ceva.

Alfabet cu animație CSS

Excelent și artistic exemplu folosind CSSîn alfabet

Navigare 3D pentru site

O bară de navigare simplă, dar foarte elegantă pentru site, bineînțeles realizată folosind doar CSS3. fără imagini sau scripturi.

Google Doodle 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 de imagine bine realizat și de înaltă calitate. Plus 4 exemple în demo.

Inel dublu animat

Un inel frumos animat și multicolor, fără prea mult cod CSS

Estompare în CSS

Mi se pare foarte filtrul necesar, mai ales că este realizat în CSS pur. Folosind estomparea, puteți atrage atenția utilizatorului asupra unui anumit punct.

Ghidul complet pentru Flexbox

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

Meniu colorat și animat pe CSS3

Un meniu derulant frumos pentru un site web cu pictograme. Un mare plus este că este realizat în întregime în CSS.

filtre CSS

Material de înaltă calitate în limba engleză despre care vorbește folosind CSS filtre pe imagini.

Forme CSS

Postează despre Forme CSS cu numeroase exemple

Bare de progres în CSS

O lecție despre cum să creați bare de progres elegante folosind CSS pur și animație. De asemenea, puteți să vă uitați la exemplu și să descărcați 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 văzuți pe blog, dar mi se pare că merită să vă arăt din nou. Din moment ce acestea sunt cele mai multe indicatori frumoși pe Internet folosind CSS.

Butoane

În zilele noastre este greu să surprinzi cu butoanele CSS, dar aceasta este o opțiune destul de decentă

Generator pentru crearea comutatoarelor

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

Sfaturi instrumente

Bibliotecă CSS pentru sfaturi gratuite - Hint.css

Scheme de culori

Scheme de culori pentru oamenii cărora nu le place să sape în cod

Salutare tuturor. Am dat de curând peste o serie de tutoriale video foarte utile și interesante pe tema „ Animație CSS" Dar ghinion, toate videoclipurile erau deschise Limba engleză, și probabil că nu orice designer de layout cunoaște engleza la un nivel suficient pentru a înțelege și asimila pe toate 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? - in curand

Ce este animația CSS?

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

Animațiile de pe web au două idei principale. Prima idee - aduce ceva la viață. Ești ca Dr. Frankenstein. Ai un monstru fără viață și îi dai viață. Al doilea - vizualizarea mișcării. ȘI cuvânt cheie aici este tocmai „mișcare”.

Cum se anime?

CSS are două instrumente principale cu care putem muta elemente în jurul unei pagini web. Prima (despre care vom vorbi 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 – cadre cheie). Ne vom uita la acest instrument mai detaliat în lecția următoare, dar acum ne vom uita la proprietate CSS tranziție. Și apoi vom vorbi despre ce ar trebui să fie animat pe pagină (când utilizatorul are nevoie de el) și ce nu ar trebui să fie animat (când animația pare stupidă și nepotrivită), pe baza experiența utilizatorului(UX - experiența utilizatorului).

Proprietatea de tranziție CSS - parametri și valori

Sintaxă

În primul rând, să vedem cum este citită această proprietate și să înțelegem sintaxa acesteia. Scriem această proprietate cam așa:

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

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

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, înălțime 100 pixeli și înălțime 200 pixeli). Și cum va arăta acesta tranziție(din tranziție engleză), va depinde de parametrii pe care îi dăm.

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

Al doilea parametru este durata (durata) animației, adică cât timp va dura elementul 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 va fi distribuită intensitatea animației pe tot parcursul timpului. De exemplu, o animație poate începe brusc, apoi poate încetini la sfârșit și încheia tranziția fără probleme. Poate fi folosit ca cuvinte cheie (de exemplu, uşurauş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ă așteptați înainte ca animația (în cazul nostru, o tranziție) să înceapă.

Exemplu de animație de tranziție CSS

Să ne uităm la asta Exemplu CSS animatii:

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

Aici animam 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 diferite state element, atunci tranzitie lina(animația) va fi disponibilă numai proprietăți de opacitate. Înțelegi?

În loc de o anumită proprietate, puteți folosi și cuvântul cheie „ toate" Aceasta înseamnă că animăm 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 puțin 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 se va dizolva rapid, în funcție de valorile proprietății în cele două stări ale sale.

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

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

În general, aceasta este formula pentru modul în care vom înregistra animația de tranziție. Aceasta este sintaxa. Dacă este necesar, puteți adăuga mai mult de o tranziție [proprietate] pentru un element. De exemplu, puteți anima cu parametri diferiți modificarea înălțimii și lățimii unui element. 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 o altă 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 poți anima î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 pur și simplu nu pot fi animate.

Proprietăți animabile

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 că fontul crește treptat în dimensiune și apare o animație care durează ceva 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, puteți vedea clar creșterea literelor. De asemenea, poate fi observată o schimbare 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 animate.

În general, amintiți-vă, dacă vă imaginați că este animat, atunci poate fi animat. Cel mai adesea acest lucru 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. poziţie…

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

Să facem expoziție. Vă puteți imagina cât de vizual este schimbarea dintre " afişa:bloc;"Și " afişa:în linie-bloc;"? Cum se poate schimba fără probleme aspectul unui element între „ poziţie:relativ;" Și " poziţie:absolut;"? Nu, desigur, elementul va arăta diferit dacă 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 și nu va apărea nicio animație.

Performanța animației în CSS

În general, multe proprietăți sunt animate, dar unele nu. Acum să decidem care proprietăți animabile sunt mai bune pentru animare și care sunt mai rele. Este despre despre productivitate. Am atins subiectul performanței, 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ţă

Mai mult, primii trei elemente din această listă sunt toți parametrii proprietății de transformare (translate, scale, rotate). 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 tranziția moale și lină de 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 orice 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 pe o pagină web și animarea elementelor care sunt dificil de redate de browser (de exemplu, umbre).

Cum se face animație î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 de făcut căi diferite. Dar există 2 principale pe care trebuie să le stăpânești obligatoriu. 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 se va declanșa o animație. În acest fel, puteți anima elementul în sine sau oricare dintre ele elemente copil. Apoi vă voi arăta cum funcționează. A doua cale este schimbarea clasei de elemente. Adică ai element normal, î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 o animație, iar dacă eliminați o clasă, va avea loc animația inversă. Acest mod bun pentru animarea meniurilor sau a listelor derulante.

Postfaţă

Am acoperit tot ce avem nevoie pentru a crea animații folosind CSS pur. O să ne dăm seama 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 nu ți-a plăcut? A fost articolul incomplet sau fals?
Scrieți în comentarii și promitem să ne îmbunătățim!

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 — nume unic animații (cadre cheie, vom vorbi despre ele puțin mai târziu).
• 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 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 aspect document. Prin urmare, vom avea propriul nostru „Bună, lume!”

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