I was recently brought into a project for a client that required extensive CSS Animations. Having not ventured into animations too much in the past this was a new challenge to tackle for me. First steps? Search for some blog posts about “Mistakes to Avoid When Writing CSS Animations” and “Top 10 Tips for CSS Animations”. But those searches came up empty. So here are a few things I learned trial and error style.
Use Vendor Prefixes
Autoprefixer is your friend. If you’re using VSCode check out the autoprefixer addon. It will run through your CSS and prefix anything with the appropriate vendor prefixes and save you oodles of time typing every line over and over again for each prefix.
Use 3D Transforms
“CSS animations, transforms and transitions are not automatically GPU accelerated, and instead execute from the browser’s slower software rendering engine.” (Team Treehouse)
Plainly put, even if you aren’t doing actual 3D animations you can force the browser to use hardware accelerations by using 3D transforms.
Instead of using transform: translate(tx, ty) you can use transform: translate3d(tx, ty, tz).
The same applies for transforms such as rotate and scale.
Reuse Animation Keyframes
Instead of writing separate keyframes for every individual animation, you can reuse existing keyframes. For example, if you need to zoom an element you can write a general keyframe titled “zoomin” or “zoomout” and apply that keyframe animation to any additional elements that need to zoom the same amount. Which is a good way to keep all your movements on the site consitant.
Use Pointer-Events instead of display: none
Instead of hiding and showing frames of your animation with display: none, use pointer-events to render items as if they weren’t on the page.
“It can be switched on and off easily via CSS without interrupting animations or affecting the rendering/visibility in any way.” (Gyroscope.pe)
You can combine this with opacity to hide and show elements of your page without having to re-render. This is especially helpful with elements that overlap interactive elements instead of relying on precise timing to make sure your hidden element is out of the way in time for the user to interact with another.
Animate Opacity and Transforms Only
Transforms are much more performant than changing the width or position of an element in the browser. Any time an element moves or changes size it needs to be recalculated. Using transforms only helps shave off milliseconds from the page’s load time because the transforms have been optimized for the browser.
Maybe Try and Avoid Absolutely Positioned Elements
Take it from me, if at all possible, don’t use absolutely positioned items. The project I worked on was a very specific design that was full screen, no scroll bars. The elements that needed to be animated also needed to be positioned in specific places relative to other elements on the page. Maybe there was a better way to do it but it ended up being a lot of absolutely positioned elements to get all the puzzle pieces together. Which worked great until 7 people tested the site in different browser sizes and then the spaghetti of media queries began, and is still going, and is probably never ending. *sigh*
Top comments (0)