What I've learned about CSS animations

So for the past year I've been working on my portfolio site, on and off (mostly off). Actually for the past 9 or 10 years I've been working on and off (mostly off) on it.

Anyway, for this iteration of my portfolio site I've decided to have an animation behind my logo. The idea is for snippets of code to race buy in the background, showing the logo has transparency.

I have a full page slider showing 4 of the different languages I have experience with, one per slide: HTML5, CSS3, JS and Wordpress. Which correlates with the snippets of code rushing behind the logo. When the slide changes, so dose the logo.

The problem I experienced was that while testing my concept, my computer would overheat and the fans would kick in. Hinting to me that something is asking a lot of my processor.

Sure enough, after a quick check of the activity monitor, firefox was requireing 103% of my CPU. Not good.

So for a year now I've been trying to find a fix. Turns out, animating elements with css, by changing the values of top, right, left, and/or bottom, requires a lot of power for your browser to repaint elements.

There's a nifty reference tool called csstriggers.com, which that says there's a far more lighter way of achieving the same effect... transform.

Honestly, it's made all the difference. I can now load my testing site in 4 different browsers at once, no problem.

Also I' be remiss if I didn't tell you how I found csstriggers... by watching Lyndas course on CSS animation.