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 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.
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.