Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS Animation
Webdesign

15 Inspiring Examples of CSS Animation on CodePen

by
Length:LongLanguages:

Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)

Ang CodePen ay  ang mabilis ng maaasahan para ipakita kung ano ang aming magagawa sa aming web creations. Narito ang listahan ng ilang magagandang bagay na ginagawa ng mga tao sa CSS animations kamakailan lamang!

1. JavaScript Mickey Watch

Apple watch katulad ng Mickey watch ni Jay Savat (@jaysalvat).

Ito ay magandang halimbawa ng pagsasama ng CSS transitions, SVG graphics at JavaScript para ilagay ang kamay sa mukha ng cute na Mickey Mouse na relo.

2. CSS Submarine

Submarine na may CSS ni Alberto Jerez (@ajerez).

Ang magandang gamit ng pabilog na hugis port-hole na container ay nagbibigay sa CSS-animated submarine ng dating.

3. ASCII AT-AT

AT-AT ni Tim Pietrusky (@TimPietrusky).

Ala-Star Wars AT-AT personnel carrier, na ginuhit gamit ang text na may colours cycled sa CSS. Funky effect. Funky effect.

4. SVG/CSS Loader

Loader SVG/CSS ni Bidji (@Bidji).

Ang loader na ito ay gumagamit ng nagiiba-ibang kulay na nagbibigay ng impresyon na umiikot.

5. 3D CSS Tardis

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

Ang CSS ay magagamit para makagawa ng nakakamanghang 3D effects. Narito ang 3D tardis Narito ang 3D tardis:

6. Dozing Bird

Dozing Bird ni Peter Klein (@pmk).

Simpleng istilo ng art at tamang dami ng animation ay nagbibigay sa antok na ibon ng buhay.

7. Pure CSS border animation

Pure CSS border animation na walang SVG ni Rplus (@rplus).

Simple ngunit napaka-epektibo na gamit ng CSS borders para makagawa ng loading-style animation.

8. Star Wars: The Force Awakens

Star Wars: The Force Awakens in CSS ni Donovan Hutchinson (@donovanh).

Ang pamagat ng dadating na Star Wars na pelikula ginawa gamit ang CSS, HTML at kaunting JavaScript.

9. 3D Synth

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

Subukan ito at paikutin itong 3D synth na gawa gamit ang CSS. Nakakamanghang gawa: Nakakamanghang gawa:

10. Cascading Solar System

Cascading Solar System ni Tady Walsh (@tadywankenobi).

Ang modelo ng ating solar system, kumpleto ng bilis ng pag-ikot, mga buwan at detalye ng bawat isa sa mas malaking planeta. Ang araw ay buhay na kuha ng totoong bagay!

11. 3D Solar System

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

Isa pang solar system, subalit ngayon sa 3D.  Magandang gamit ng pagkukulay.

12. Flat Design Camera

Flat design camera na may CSS animation ni Damien Pereira Morberto (@damienpm).

Pindutin ang ang shutter sa flat camera na ito para makita na gumagawa ito ng larawan gamit ang CSS animation.

13. Day and Night Transition

Animoy Araw Gabi ni Szymon Stypa (@Catagen).

Pindutin ang button para makita ang pagbabago ng umaga sa gabi.

14. Animated Sprite with CSS

Animate sprite na may CSS ni Avaz Bokiev (@samarkandiy).

Ang pagpapakita kung papaano ang pagkakasunud-sunod ng mga imahe (sprite) ay magagamit para makagawa ng stop-motion na animation, kumpleto na may paurong at pasulong na mosyon.

15. Dodecahedron

Dodecahedron ni wontem (@wontem).

Ang  magandang dodecahedron na gawa at animated lahat ng CSS.

Pagwawakas

Hindi pa katagalan, aasa tayo sa Flash o JavaScript para sa kahit na anong in-browser animation. Ang modernong browsers ay naghatid ng mas mainam na suporta para sa CSS, na may hardware accelerated 3D at animation.

Salamat sa sites katulad ng CodePen, maaari na nating ibahagi at matuto ng mas mabilis lalo sa ngayon. Ano ang ilan sa mga nakakapagbigay ng inspirasyon na animation demos na nakita mo kamakailan?

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.