In the website design world, there is something called CSS Animation.
The image above was animated inward using CSS Animation. If you refresh this page now, you will see it do it again. It’s a funky little tool that most Website Page Builders allow you to do with a simple list of options in a dropdown. Fade in, Fade in Right, Fade in Left, Zoom in and so on.
It can be rather snazzy, but used too much, and it’s overkill. But why is it overkill, and when might you use CSS Animation?
When would you use CSS Animation?
CSS animation is used best to “alert” someone of something fresh; something different. A bit like a CTA button… you fade it in to “catch their eye”.
We provide WordPress Support for CSS Animation problems, to assist with their setup, or even removal.
In a way, our animated fade in image above, did just that. It was there to alert you of it.
But this means you don’t need to use it everywhere – and so many do!
Let’s say you have a Seasonal banner on a page, a background colour and some text. You might want a flower or something to “slide in”. But you wouldn’t want the banner, and the text and the item to all slide in. It’s just too much.
We saw a website recently that had every single row of ever page, blur in. By that we mean the text when not in focus right in the middle of the screen, was very out of focus, blurred.
But we’ve also seen websites where every single element on the screen is “fade in”, either from below or the right. Consider this: go to https://www.bbc.co.uk/news, and go down the page. Image if every image slide or faded in, and every block of text did – it would drive you up the wall.
Some designers do this and think it looks good. To some, it does. To those who visit our website or those we build, they say to us “I load up the page, and it’s just there”.
To quote Steve Jobs: “It just works.”
We do use CSS Animation at times, but on the whole, we tend to avoid it on the most part. It makes a browser work that bit harder. It makes you as a reader of the content, work that bit harder, as you have to wait, or “oh… oh.. oh” for each block to appear.
The great news is that CSS Animation is something you can turn on and off pretty easily. In fact we were asked to look at a site recently, and the entire page faded in; rather than just loading! We had that turned off pretty quickly for them.
With page builders they have the list of options to do the Animation. Some just love it and get carried away. We use it more effectively.
As an example, we have a site where there is a row of two columns. Each column is a different shade of red, with a title and CTA inside it. We animated that so they draw inwards together, the second they are on the screen. That works. Grabs the attention.
But we would never then have row after row, all fading in too.
Think of the reader. Think of the experience on a phone too. Consider CSS Animation … carefully and considerately.
If you would like some WordPress Training to learn more about CSS Animation, do let us know.