If you've come across cool effects on a website that react automatically or in response to your on-screen actions, you may be tempted to implement them on your own site.
Sometimes these effects are more functional than aesthetically pleasing. For instance, consider a situation where subsequent text on a form page might be set to reveal as you complete different steps.
Such effects make the website interactive, giving the visitor an overall satisfying experience (all factors considered). Having them on your site can help convert more qualified leads and create a following out of those who are yet to buy.
But first: how do you refer to these effects? There are two classifications. In the design world, they are referred to as transitions and animations.
CSS Transition vs. Animation
Before you can add either of these effects to your site, you need to consider which will do what you want. It’s easy to confuse CSS transitions and animations because they let you do similar things:
You can visualize property changes.
You can set easing functions to control the rate at which property values change.
You can set the duration of the transition or animation.
You can specify properties that interpret changes and initiate a reaction.
You can collect data concerning the events that cause the transition or animation to launch and use it to improve your marketing campaign.
Despite how they are alike on the surface, there are advantages and disadvantages to each option. You’ll need to understand how they will operate on your site and what you need to do to incorporate them before you decide which moving visual format is right for you.
If you just want a simple action on your site, a transition is the easiest way to go. Transitions are connected to a triggering action — most commonly, when the mouse hovers over an element. In that case, the :hover pseudo class is used to change the CSS property value, causing the element to react as desired.
You can set an element to change its color, scale, or position. You can also rotate, skew, and translate objects. If you want a bit more complicated transition, it’s even possible to affect multiple properties at once. For instance, if you want your transition to alter the background color and width, you specify entries for both background-color and width properties.
CSS Transition Example
Below is an example of a CSS transition. This graphic alternates between two definite states dependent on the mouse hover which triggers the action. Transitions can be useful but are more basic than CSS animations.
Animations are more complicated, but will also give you more flexibility — the more flexible, the more parts involved. With CSS animations, you can set different stages that alter the behavior of the element multiple times in its duration. This gives you more control over the property values in animations.
To do this, you define keyframes. You can set up as many as you want. When the animation plays, each will be hit at its turn and the property changes will be reflected in the element. With these capabilities, you can create HTML5 animations to rival those created by advanced tools like Flash.
Animations also let you specify property values in each keyframe without having to declare them. The element smoothly changes behavior once the right keyframe is reached, even if the property wasn't listed at the start
Looping CSS Animations
Unlike a transition which only plays through once after it’s been triggered, a CSS animation doesn’t require a triggering action and can be set to loop. You can make it repeat as many times as you want or set it to go on forever. You make this specification using the animation-iteration-count property, which lets you set its value in number of seconds or infinite.
There is a not-so-straightforward way to achieve a CSS transition loop by playing with the transitionEnd event. However, a CSS animation is easier if you prefer to add a loop.
CSS Animation Example
Below is an example of a CSS animation. There are multiple states that the graphic passes through and it loops. The steam shrinks in size, ascends upwards, and fades away. This image is much more dynamic than a CSS transition would be.
CSS transitions and animations have many similarities. However, it's clear that they also have significant differences that should guide how you use them on your website to improve your marketing efforts. Transitions are generally best for simple from-to movements, while animations are for more complex series of movements.