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

Czech (Čeština) translation by Karel Krkoska (you can also view the original English article)

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?