Looking for a way to add a little something extra to your website design? If you’re looking for an easy way to grab the attention of your landing page traffic, then CSS3 animations might be a good option for you. They’re light weight, meaning they don’t require much bandwidth and load quickly, which makes them ideal for mobile website design.
Subtle animations are better
Don’t be that website. The one that makes visitors in their 40s remember flying toasters and blinking text from the 90s. Be the website that people will take seriously, but not be bored with visually. One CSS (with a little Javascript) trick you’ve probably seen a few times is where the images appear to load with a little bounce only as they come into view as you scroll. It’s called Animate on Scroll (AOS). It’s been around for a while, but only in the last few years have developers put together code libraries* of the CSS3 animation functions. My favorite CSS3 Animation library is called CSS3 Animate It. I found it to be much easier to replicate the demo and work with the given functions than other libraries, but I’m relatively new to these.
You don’t need libraries to get started though, because animation functions are built into CSS3. You can head over to W3Schools.com and try their interactive tools.
*A code library is a set of code developed for a specific, and often narrow purpose. CSS animations would be an example of a narrow purposed code library, where JQuery would be considered a broad purposed code library.