Hungarian (Magyar) translation by Szabó Péter (you can also view the original English article)
A mobilos böngészőink egyre erőteljesebbé válnak és jobban képesek csodálatos, gyönyörű animációkat megjeleníteni számunkra. Amikor a CSS-elrendezéssel kombináljuk, lehetséges gyönyörű munkákat létrehozni mindenféle kép használata nélkül. Az eredmény skálázható, gyorsan betölt, és lenyűgözően néz ki.
Vessünk egy pillantást arra, hogy milyen csodálatos dolgokat készítenek és animálnak mások, mindössze HTML és CSS használatával.
1. Pure CSS Biciklis
Annyi minden van itt, hogy nehéz elhinni, hogy ez csak egyszerű HTML és CSS! Forgó animációk és többszörös, réteges mozgások vannak kombinálva, hogy a biciklist és a biciklijét mozgás közben ábrázolja. Szép felhasználása a BEM-nek is az osztálynevekben!
2. Pure CSS Szaturnusz hulahoppozás
Sok mozgó elem kombinálásával egy egyszerű HTML elemkészlet sokkal összetettebb animációvá alakítható, és ez a demó ezt nagyon jól csinálja. Látjuk, hogy hogyan kapcsolódik két bolygó egymáshoz, miközben a köröző "részecskék" épp csak annyira szóródnak szét, hogy véletlenszerűnek hasson.
3. Színrétegek CSS animációja
Az egyszerű, színes rétegek talán nem tűnnek nagy valaminek, de mozgás közben elég karakteressé válhatnak. Ebben a példában egy sor félig átlátszó HTML bekezdés tag lett animálva, és az eredményképp kapott halmozott animáció hipnotikus hatású.
4. Jégkrémes betöltő
Nem mindig van szükségünk JPG-re vagy PNG-re csodálatos képek létrehozására, ez is egy példa rá. Egy div konténer és négy másik kell mindössze ehhez az ízletesen falnivaló kis jégkrém-témájú betöltőképez. Az eredmény kód sokkal kisebb, mintha egy animált GIF lenne.
5. Pure CSS galambok
Amikor kombináljuk a HTML elemek művészi használatát némi karakteres animációval, ez a végeredmény. Egy csodálatosan folyamatos, mégis szemet gyönyörködtető látvány. Hatalmas elismerés Julia Muzafarovának ezért a hihetetlenül aprólékos munka elkészítéséért azzal a rengeteg kulcs kerettel. Ez sok kávét igényelhetett!
6. Alvó macska
Sok egyszerű HTML elem összerakva egy rakat finom, szórakoztató animációval ezt az alvó macskát eredményezi. Ez a példa Sass-t használ, és változókat az animáció irányítására. Próbálj megváltoztatni párat és nézd meg, mi fog történni!
7. Fekete medve
Folyamatos animációk is elérhetővé válhatnak HTML és CSS használatával, különösen, ha követünk pár alapelvet. Ez az animáció az elemek számát a minimumon tartja és sokat használja a transzformációkat.
8. CSS szivacs
A gyors animációkkal sok karakter összeadódhat, ha kombináljuk őket. Ebben a demóban azt látjuk, hogy buborékok és fröccsenések vannak összekombinálva egy aranyos animációban egy boldog szivaccsal, mindez képek nélkül.
9. Pure CSS Postai levél
Egy sor kulcs keretanimáció elmesélhet egy történetet vagy segíthet az embereknek megérteni, hogy mit is látnak. Itt most kinyitunk egy borítékot és megkapunk egy levelet.
10. Autós előtöltő
Finom kis mozgás létrehozásával nagyszerű intenzitásérzetet hozhatunk létre! Ebben a betöltőben van egy kocsi, ami úgy néz ki, mintha gyorsítana, és mindez csak pár elemből és CSS animációkból áll. Mivel nincsenek benne képek, ezért gyorsan betöltődik.
Légy inspirált!
Ahogy mindig, most is köszönet a CodePennek és az ezen demók mögött álló kreatív elméknek; rengeteg inspirációt nyújtanak nekünk ezekkel a példa animációkkal. Nézd meg a következő bejegyzéseket hasonlókért, és hogy megtanuld elkészíteni a saját CSS animációidat!
