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.

You might have noticed that some effects seem more complex. JavaScript can be used to render these effects but today we'll talk about using them with CSS. In fact, CSS3 is arguably the more efficient method of setting them up.

Free Intro Guide to HTML & CSS [Download Now]

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.

CSS Transitions

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 Transitions and JavaScript

Property values that are predefined in CSS may prove limiting for certain interactions. In such cases, you might want to resort to JavaScript. But if you don't want to use JavaScript entirely it's possible to set up a hybrid approach. 

A simpler CSS transition is your friend if you decide to manage the more difficult aspects with JavaScript.

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.

CSS transitions.

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

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.

Learn more about what CSS animations are and how they can be used on your site. 

New Call-to-action

 css introduction

Originally published Mar 25, 2020 1:16:33 PM, updated April 30 2020

Topics:

CSS Animation