BACK

Animatii CSS simple pentru website-ul tau

Daca un design bun face ca website-ul tau sa iasa in evidenta fata de competitori, animatiile vor da suflet acestuia si vor incanta vizitatorii.

Animatiile dintr-un website pot fi foarte complicate, uneori fiind necesar sa fie scrise multe linii de cod folosind CSS si JS. De data asta ne vom concentra pe un numar mic de animatii, scrise doar in CSS, pe care oricine le poate implementa foarte usor in site-ul lor pentru a face ca lucrurile sa fie mai dinamice si placute.

Prima categorie de animatii sunt cele de hover unde miscarea mouse-ului peste un element va porni animatia. Avem la alegere doua metode: folosind transition sau animation. Primul element (cerc in exemplul nostru) isi va schimba culoarea si textul ascuns va aparea folosind transition iar al doilea element isi va schimba dimensiunile folosind animation si transition. Avantajul la animation este puterea de control mult mai mare asupra animatiei. (pe mobil atingeti cercurile cu degetul sa porniti animatia si apoi oriunde sa o terminati)

Hover!

Hover!

Cod sursa pe Codepen

A doua categorie de animatii sunt cele care se repeta la infinit. Se pot forma elemente jucause pe site sau elemente care sa atraga atentia vizitatorului asupra unei zone importante a site-ului.

!

!

Cod sursa pe Codepen

Indiferent de ce tip de animatie introducem in website acestea trebuie sa se alinieze intotdeauna cu design-ul folosit. In acelasi timp trebuie sa avem grija sa nu introducem prea multe elemente care sa afecteze performanta. Intr-un articol viitor vom discuta despre animatiile de la incarcarea unei pagini si cele care pornesc de la un click.

Mai multe articole

INOVEO a scris

INOVEO semneaza proiectul de rebranding pentru GURSK

Companie de distributie de implanturi si solutii complete pentru medicii stomatologi. Bucuresti, iunie 2025 – INOVEO, agentie de branding cu 25 de ani de experienta, a semnat proiectul de rebranding pentru GURSK, prima companie care [...]

Read More... from Animatii CSS simple pentru website-ul tau

Citeste tot articolul

INOVEO a scris

Ce ramane viu intr-o lume care invata sa mimeze viata?

Acest articol pleaca de la ideile care s-au conturat in timpul si imediat dupa recentele discutii de la IQ Digital, editia proaspat incheiata, desfasurata intr-un loc cu totul special: Cazinoul din Constanta – o bijuterie [...]

Read More... from Animatii CSS simple pentru website-ul tau

Citeste tot articolul

INOVEO a scris

Logo-ul nu conteaza

… chiar atat de mult cat crezi Spune pe bune, ai alocat ore intregi sau zile sau poate chiar saptamani in dezvoltarea unui logo pentru compania ta sau brandul tau? Cu siguranta ca da. Gandeste-te [...]

Read More... from Animatii CSS simple pentru website-ul tau

Citeste tot articolul

INOVEO a scris

Cat costa luxul

Pretul nu e o simpla eticheta. E o declaratie. Si, cel mai important, e parte integranta din procesul de constructie a brandului. Brandurile de lux nu vand produse. Vand statut, aspiratie, apartenenta la un cerc [...]

Read More... from Animatii CSS simple pentru website-ul tau

Citeste tot articolul