How to do a CSS Frame-by-Frame Animation

Mikhail Romanov
Aug 22, 2017 · 1 min read

Check out my new article published on SitePoint and featured by Frontend Focus to find the most performant way of implementing a frame by frame animation.

Or read the main gotchas here if you’re in a #havenotime mode:

  • Use SVG over GIF/PNG/JPEG if you care about scalability and responsiveness
  • Animate the opacity and transform properties if you care about rendering performance
  • Use sprites and inline SVG over multiple external assets if you care about first-time page load performance
  • Use sprites over inline SVG if you care about page load performance during repeated page visits
  • Use whatever solution you and your team feel comfortable with, if it keeps your code more readable and decreases maintenance costs inside the team.

)

Mikhail Romanov

Frontend engineer at https://www.buzzwoo.de/, https://stackoverflow.com/story/romanovma, https://www.linkedin.com/in/mikhail-romanov-903aa7a0/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade