15 Inspirativních příkladů animace CSS na CodePen

CodePen se rychle stává místem, kde můžete ukázat, co můžeme dělat s našimi webovými výtvory. Zde je seznam některých skvělých věcí, které lidé nedávno vytvářeli s animacemi CSS!

1. JavaScript Mickey Watch

Apple watch like Mickey watch od Jay Salvat (@jaysalvat).

Jedná se o krásný příklad kombinace přechodů CSS, grafiky SVG a JavaScriptu pro umístění rukou na roztomilý ciferník Mickey Mouse.

2. CSS Submarine

Submarine with CSS od Alberto Jerez (@ajerez).

Nádherné využití kruhového tvaru kontejneru v podobě portu dává této CSS animované ponorce spoustu kouzla.

3. ASCII AT-AT

AT-AT od Tim Pietrusky (@TimPietrusky).

Hvězdnými válkami inspirovaný AT-AT, kreslený textem s barvami cyklickými v CSS. Funky efekt.

4. SVG/CSS Loader

Loader SVG/CSS od Bidji (@Bidji).

Tento loader používá měnící se barvy, aby vyvolal dojem otáčení.

5. 3D CSS Tardis

3D CSS Tardis od Gerwin van Royen (@Gerwinnz).

CSS lze použít k vytvoření úžasných 3D efektů. Zde je 3D tardis:

6. Dozing Bird

Dozing Bird od Peter Klein (@pmk).

Jednoduchý umělecký styl a jen správné množství animace dávají tomuto ospalému ptákovi iluzi života.

7. Pure CSS border animation

Pure CSS border animation without SVG od Rplus (@rplus).

Jednoduché, ale velmi účinné využití hranic CSS k vytvoření animace ve stylu načítání.

8. Star Wars: The Force Awakens

Star Wars: The Force Awakens v CSS od Donovan Hutchinson (@donovanh).

Titul z nadcházejícího filmu Star Wars vytvořený pomocí CSS, HTML a trochu JavaScriptu.

9. 3D Synth

Pure CSS 3D Synthesizer (mousedown for rotation) od Nikolay Talanov (@suez).

Vyzkoušejte klávesy a otočte tento 3D syntezátor vytvořený pomocí CSS. Skvělá práce:

10. Cascading Solar System

Cascading Solar System! od Tady Walsh (@tadywankenobi).

Model naší sluneční soustavy, doplněný měřítkem rychlosti otáčení, měsíci a detaily na každé z větších planet. Slunce je dokonce živé zachycení skutečné věci!

11. 3D Solar System

Full CSS 3D Solar System od Wayne Dunkley (@waynedunkley).

Další solární systém, ale tentokrát ve 3D. Krásne využití stínování.

12. Flat Design Camera

Flat design camera with CSS animation od Damien Pereira Morberto (@damienpm).

Stiskněte spoušť na této ploché kameře a uvidíte, že vytvoříte fotografii pomocí animace CSS.

13. Day and Night Transition

Day Night simulation od Szymon Stypa (@Catagen).

Stiskněte tlačítko pro přeměnu dne na noc.

14. Animated Sprite with CSS

Animate sprite with CSS od Avaz Bokiev (@samarkandiy).

Ukázka toho, jak může být sekvence obrazů (sprite) použita k vytvoření stop-motion animace, kompletní s pohybem vpřed a vzad.

15. Dodecahedron

Dodecahedron od wontem (@wontem).

Nádherný, krásný dodekedron vytvořený a animovaný zcela s CSS.

Závěr

Ne tak dávno bychom se naklonili na nástroje Flash nebo JavaScript pro animaci v prohlížeči. Moderní prohlížeče přinesly lepší podporu pro CSS, s hardwarově zrychleným 3D a animací.

Díky stránkým, jako je CodePen, můžeme sdílet a učit se jednodušeji než kdykoli předtím. Co jsou některé z nejvíce inspirativních animací, které jste viděli nedávno?