To make sure your animations don’t cause performance issues, consider the impact of animating a given CSS property. Avoid layout recalculations and minimize repaints. Where you can, stick to changing transforms and opacity.
CSS animations are known to be super performant. Although this is the case for simple animations on a few elements, if you didn’t code your animations with performance in mind and add more complexity, website users will soon take notice and possibly get annoyed.
"Gratuitous animation can be seen everywhere and it’s not only limited to amateur designers. As a user it’s easy to spot this kind of animation. It’s the animation that gets in your way. The animation that makes you furrow your brow in frustration as it stands between you an your intended goal."
"A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS."