OutSystems engineers and designers write on CSS performance, 60 FPS animations, mobile UI, and UX for web and mobile apps.
HN commenters recommend its 60 FPS CSS animation article as a decent resource and discuss ideas like will-change for GPU rendering.
Really well written article. Chrome hasn't yet released CSS support for mod() so most of the examples on the page don't animate unless you're using the preview release of Chrome.
If you're not needing to control ticks and just want smooth CSS animations in all browsers, the FLIP method is useful:
https://medium.com/outsystems-experts/flip-your-60-fps-animations-flip-em-good-372281598865
I wonder if adding
will-change: opacity
to the CSS would improve performance (by switching CSS animation rendering to the GPU)
https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108#.2kb4429b9
I am biased, I know, but I would like to recommend my company's three blogs:
https://medium.com/outsystems-experts
https://medium.com/outsystems-engineering
https://www.outsystems.com/blog/category/tech-zone
This resource is pretty decent https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108