How to do a CSS Frame-by-Frame Animation
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
opacityandtransformproperties 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.
