Cauta rapid aici ↑

Animatie in valuri

Este relativ simplu sa creezi o animatie in valuri si nu trebuie sa te sperie cantitatea de cod ce se poate vedea imediat dupa afisarea animatiei. Volumul de cod este identic pentru fiecare litera in parte (in proprietatea @keyframes) iar voi puteti sa personalizati afisarea fiecarui dreptunghi care creste sau scade pe inaltime. Din acest motiv am lasat atat de mult cod CSS.

Nu voi intra foarte mult in detalii pentru ca sunt convins ca in acest moment cei mai multi dintre voi stiti cu ce se mananca animatiile in CSS3 dar va voi da cateva trucuri folosite pentru a intelege mai bine cum functioneaza aceasta animatie in valuri.

Fiecare dreptunghi albastru si fiecare litera aferent lui sta intr-un div parinte ce are clasa CSS letter. Div-ul albastru care creste si scade pe inaltime are in componenta lui proprietatea position cu valoarea obligatorie absolute. O alta proprietate importanta este bottom iar valoarea 0px (zero pixeli) va face ca div-ul nostru sa se intoarca cu susul in jos sau altfel spus pozitia lui absoluta va fi catre bottom si nu catre top cum are ca setare de baza. In acest caz noua nu ne mai ramane decat sa animam inaltimea acestui div albastru, ce binenteles are mai multe proprietatii pentru a putea functiona corect.

Un alt truc la fel de important este dat de folosirea proprietatii CSS 3 animation-delay care va avea ca valoare numai valori numerice si legat de acestea litera s sau ms reprezentand secunde sau milisecunde, depinde doar de noi ce unitate vom folosi. Este important sa stiti ca o secunda are 1000 de milisecunde. Revin la ideea anterioara si dupa cum se poate vedea in codul CSS, fiecare clasa CSS care corespunde unei anumite litere are un decalaj fata de clasa CSS anterioara de 100 de milisecunde iar cu acest truc vom simula aparitia valurilor in aceasta animatie.

Nu trebuie sa uitati de valoarea alternate de pe proprietatea CSS 3 animation, valoare ce va face ca animatia noastra sa alterneze de la sfarsit spre inceput. In cazul in care aceasta lipseste animatia noastra va fi de la inceput spre sfarsit si apoi odata ajunsa la sfarsit va incepe brusc de la inceput si din acest motiv va recomand folosirea si a valorii alternate pe proprietatea animation.