DEV Community

Discussion on: Animate CSS code: create a panda animation with HTML & CSS

Collapse
zoedreams profile image
☮️✝️☪️🕉☸️✡️☯️ • Edited

you can simplify your sprite map if you consider using SVG instead..

css-tricks.com/animating-svg-css/

basically you can assign classes to the aspects of the SVG shapes and animate those. vector graphics use a lot less memory and cycles then having to move rastered images around. A good way to test the performance of your code is to see how many dancing bears you can draw on the screen without frame skips or jitter. :)

vector drawing utilizes the gpu rendering on your browser for cleaner and less janky frames. nice work. this stuff is why i love css so much. thank you for sharing.