DEV Community

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

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

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

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.