CSS Animation and how to use it well in your website

With the progression of Cascading Style Sheets (or CSS) to include the ability to create animations, there are now a plethora of possibilities to create eye-catching visuals on your website and as we all know CSS animations rate very high in the “cool” factor when it comes to web development. Not only that but people love seeing movement and interactivity in digital format. With the right animation, you can accomplish a lot by telling a story which helps describe complex ideas better than text or a non-animated illustration could. Websites with animations can also entertain the visitor to the site longer than a site without animation.

The history of animating on websites and web applications

Animation is not new to websites and web applications. Over the years of the history of the web, Adobe Flash and Flex were once very popular for interactive animations as well as popular JavaScript libraries such as jQuery. As most people know Flash is not considered to be a good tool to use for animation anymore unless you have no need to consider mobile devices such as cell phones and tablets, since Adobe is discontinuing Flash support in 2020. jQuery has its place still and will continue to be widely used, but there are some instances where you will simply want to use only CSS animation which consist of transitions and animation using keyframes.

CSS Transitions and Animations

The main difference between CSS transitions and animations is a transition will go directly from state A to state B while with animations and keyframes you can have multiple steps and the animations are more complex. An example of using transitions would be if you want a button to enlarge or change color on hover or active or changing a hyperlink color on hover. Another difference is animations can loop (play over and over) or just play once.  A transition will occur on a mouse event such as a hover or tap on mobile.

CSS animation best practices

When it comes to CSS animations as a developer you should follow the less is more principle. Animations are fun to create, especially with CSS, but you should use animation sparingly to complement your design, and not distract your audience from the task at hand. For example, if you sell a product on your website your goal is to ultimately get the visitor to add the product to a shopping cart, checkout and make the purchase. Other goals might be to get the visitor to your site to fill out a form, call your business or download an informational PDF file. The animation on your website can help encourage these goals but if your visitors watch an animation on your website but don’t understand the message delivered by the animation then you basically just created a distraction without a positive result. Another mistake would be to have multiple animations going at once on your website which would not only confuse the visitor but also might give them a headache!

CSS Animations should explain something complex or tell la story. It’s really all about communication, after all. A picture can say a thousand words but may not be able to capture a visitor’s attention or tell a story like animation can.