Prevent CSS transitions on page load with ES6
posted in articles
I recently noticed on my blog that sometimes the CSS hover transitions for font-size
, border-color
, and
color
animate on page load. While this doesn’t impact the final design, it does make the
initial page load a bit of a stylistic mess.
I stumbled upon a great post on css-tricks that outlined a fix for this issue using jQuery. However, my goal for this site has always been keeping it as lean as possible. That's why I use Jekyll for static pages and minimal scripting (outside Disqus and Google Analytics). So of course I dug into how we can skip jQuery and just use ES6.