17 min remaining

Animations can be powerful tools for engaging and delighting visitors on your site. They can make the loading experience more entertaining, direct the visitor’s eye to an important element on the page, and improve usability.

By using CSS animations, elements can be shifted, rotated, slanted, squashed, spun, and stretched on the page. They can be bounced across the page and interact with each other in all sorts of interesting ways.

While rendering animations on the web isn’t new, the process is. Animation used to require JavaScript, which is considered one of the most difficult coding languages to learn, or Flash, an Adobe product that you have to pay a monthly fee to use. In the past decade, many developers have shifted away from JavaScript and Flash to using CSS for animations. Most already know CSS — plus it’s free!

Free Intro Guide to HTML & CSS [Download Now]

To help you understand this web design trend, we’ll walk through what CSS animation is, different types of CSS animation, and examples of animations being used on live sites.

What is CSS animation?

Let’s say you want to use multiple CSS style configurations — like different colors, levels of opacity, border radiuses, and so on— on a single page element. To have elements gradually change from one style to another, you can use CSS animation.

There are dozens of animatable CSS properties you can choose from. You can have a progress bar show how quickly your site is loading, a button change colors when a visitor hovers over it, and your logo bounce in from the left side of the screen. You can even animate an element's padding area to transition between colors. Animations like these can help make your web design more cohesive and more memorable.

CSS animations are made up of two parts: keyframes and animation properties. We’ll define both below.

Keyframes

The first part of a CSS animation is a set of keyframes that indicate the start and end of the animation (as well as any intermediate steps between the start and end). In other words, each keyframe describes how the animated element should render at a given time during the animation sequence.

That’s why keyframes often include a percentage. These percentages indicate at which point in the animation sequence they take place.

Let’s look at an example by Mozilla. Say you want to style a paragraph (the <p> element) so it slides in from the right side of the browser window. For this slide-in animation, there are just two keyframes. 

The first occurs at 0% or the first moment of the animation sequence. Both the left margin and width of the <p> element are configured so that it’s drawn from the right edge of the browser. The second keyframe occurs at 100% (i.e. the last moment of the animation sequence). The left margin and width of the <p> element are configured so that, once finished its animation, the paragraph is flush against the left edge of the content area.

Take a look at the CSS classes in the code and animation below.

 

 

   p {

animation-duration: 3s;

animation-name: slidein;

}

 

@keyframes slidein {

from {

margin-left: 100%;

width: 300%;

}

 

to {

margin-left: 0%;

width: 100%;

}

}

<p>The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p>

 

paragraph animated so it slides in from the right side of the browser window

Let’s say we want the <p> element to do something between the start and end of the animation. We might, for example, add another keyframe so that the font size of the paragraph increases as it moves from right to left and then decreases back to its original size by the end of the sequence.

In that case, the code will look like this:

 

 

p {

animation-duration: 3s;

animation-name: slidein;

}

 

@keyframes slidein {

from {

margin-left: 100%;

width: 300%;

}

 

75% {

font-size: 300%;

margin-left: 25%;

width: 150%;

}

 

to {

margin-left: 0%;

width: 100%;

}

}

 

<p>The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p>

 

 

The animation would now look like the following.

 

paragraph animated to increase as it moves from right to left and then decreases back to its original size by the end of the sequence

With a firmer grasp of keyframes, we can now turn our attention to the second part that makes up CSS animations: animation properties.

Animation Properties

Animation properties assign the keyframes to a specific CSS element and define how it is animated.

You may have noticed that the code snippets above included the following two properties:

  • animation-duration
  • animation-name

These two properties, specifying the type of animation and length of time of the animation sequence, are required for any animation to take effect.

There are additional properties you can use to create more complex and custom animations.

We’ll briefly discuss each of these below.

Animation Timing

The animation-timing function sets the pace of the animation. To specify the timing of your animation, you can use the predefined values ease, linear, ease-in, ease-out, and ease-in-out. You can also create custom values using the cubic-bezier curve for more advanced timing options.

If no other value is assigned, the function will be set at ease by default. Ease starts out slow, speeds up, then slows down. Below is an example.

circles with animation-timing property set to ease

Source

Set at linear, the animation has the same speed from start to end. With ease-in, the animation has a slow start. With ease-out, it has a slow end. Ease-in-out means the animation has both a slow start and a slow end.

Animation Delay

Using the animation-delay function, you can specify when the animation starts. Milliseconds and seconds are allowed, as are positive and negative values. A positive value will delay the animation sequence whereas a negative value will start the animation immediately, as if that amount of time has already gone by.

If you set the value at 2s, for example, then the animation will start 2 seconds after it is loaded. If you set the value at -2s, then the animation will start two seconds into the animation cycle.

In the example below, a negative animation delay causes each circle to begin immediately at a different state in the animation cycle.

circles with negative animation delay

Source

Animation Iteration Count

The animation-iteration-count property specifies the number of times that the animation will play. You can use a number value to have it repeat a certain number of times.

You can set it to initial to use the default value (1), which means the animation will play through its sequence once. You can set it to inherit to use the same value as its parent element. Or you can set it to infinite to have it repeat indefinitely. Any CSS animation with its animation-iteration-count set to infinite is considered a CSS loop animation.

Take a look at the demo below which shows three versions of the same animation, each with their animation-iteration-count property set at different values.

three cubes with animation-iteration-count property set to 1, 2, and infinite

Source

Animation Direction

The animation-direction property defines the direction of the animation. If you use the normal or default value, then the animation will play forwards. If you use reverse, it will play backwards.

To have the animation reverse directions every cycle, you can use the alternate value (the animation will play forwards first, then backwards) or the alternate-reverse (the animation will play backwards first, then forwards).

Take a look at the demo showing each direction below.

four cubes with animation-direction property set to normal, reverse, alternate, alternate-reverse

Source

Animation Fill Mode

Using the animation-fill-mode function, you can have the animation styles applied before or after the animation plays.

There are four possible values you can set this function to:

  1. If you set the property value to normal, then styles will only be applied to the animated element when it’s playing.
  2. If you set it to forwards, then the animated element will retain its style values defined by the last keyframe.
  3. If you set it to backwards, then the element will take on the style values defined by the first keyframe before it begins playing.
  4. If you set it to both, the animation’s style values will be applied before and after the animation plays.

Below is an example of an animation with its animation-fill-mode property set to forwards and the default value (normal).

two buttons with animation-fill-mode property set to forwards and normal

Source

Animation Play State

With the animation-play-state property, you can pause and resume the animation sequence. By default, this property is set to running but you can set the property value to paused. Resuming a paused animation will play the animation from where it was paused, instead of starting over.

ball with animation-play-state property set to paused

Source

We now have a clear understanding of the different parts that make up an animation. Before diving into the different animation types, let’s avoid a common misconception by differentiating between CSS transitions and animations.

CSS Transition vs. Animation

Though often grouped together, CSS animations are different from CSS transitions. One major difference is that CSS transitions require a trigger — like a visitor clicking on an element, for example. Animations, on the other hand, don't require triggering. By default, an animation will automatically begin its sequence when the page loads. (It’s important to note that some developers will use jQuery or implement another way of triggering an animation, but they don’t need to).

Another major difference is that transitions can only move from an initial state to a final state. You cannot specify any intermediate points like you can with an animation.

Nor can you have a transition loop or repeat backwards. That’s because, while animations have the animation-iteration-count and animation-direction property, transitions don’t have properties that specify how many times they can run or what direction they can run in. As a result, a transition runs only once when triggered.

Now that we have a better understanding of what CSS animation is (and is not), let’s take a look at a specific subset called 3D transforms.

CSS 3D Animation

CSS 3D animation — commonly referred to as 3D transforms — opens up a new realm of graphic design. With 3D transforms, front-end developers can add a new dimension to traditional websites to enhance their design.

For example, consider the translate function. Translate moves an element from point A to B. In 2D, you can use translate to move an element along the horizontal X-axis or the vertical Y-axis. In the example below, the black ball moves across the X-axis.

ball animated with translate function in 2D

Source

Using a 3D transform function, however, you can position an element along the Z-axis. Since this axis runs front to back in 3D space, you can move an element closer to the viewer and then farther away. Take a look at the example below.

cube animated with 3d transform CSS function

Source

As with any animations, 3D transforms should be more than just eye candy. When used wisely, they can solve interface challenges and enhance the visitor experience. When used without strategic purpose, they can be distracting and clutter your interface.

Now that we’ve gone through a brief overview of CSS animation in 2D and 3D, let’s look at the different types of CSS animation.

Types of CSS Animation

Since there are thousands of types of CSS animation, we’ll limit our focus to some of the most common— and coolest!— types you’ll see on the web.

CSS Text Animation

Animated typography can immediately capture the attention of your visitors. Of the many ways you can animate text on your site with CSS, adding a rainbow effect, shadow, glitch effect, and gooey effect are among the most common.

Below is an example of a handwriting animation in which the visitor watches the text being written on the page.

logo using css text animation

Source

CSS Color Animation

You’ll often see the background of a web page animated to alternate between colors, as in the example below.

background using css color animation

Source

CSS color animations can also be applied to text, buttons, borders, and other elements on the page, making them ideal for drawing the visitor’s eye to a specific point on the page.

Slide-in Animation

Using this CSS animation, you can have an element slide in from the top, bottom, left, or right of the screen to grab the visitor’s eye. You can also combine the slide-in animation with other effects to further customize your design. In the example below, the slide-in animation is combined with a blurred text effect so that the company name slowly comes into focus.

logo using slide-in animation

Source

CSS Rotate Animation

You can use CSS to rotate an element in 2D or 3D space. This animation is often combined with other animations to show elements in motion. Take the example of the rocket below. It’s not only translated from the bottom left of the screen to the top right over a period of three seconds, but also rotated 70 degrees in a clockwise direction over the first two seconds.

plane icon using css rotate animation

Source

CSS Wave Animation

The CSS Wave animation is a unique use case of the rotate animation. To create a CSS wave animation, you need to create multiple HTML objects to represent your waves. Then you’ll apply the rotate animation to each wave with different background colors and values for the animation-timing property. You can also experiment with opacity.

The effect will look something like the demo below. page using CSS wave animation

Source

CSS Glow Animation

CSS glow animations can contribute to the ambiance of your site. For example, to promote an event on your site, you might add neon glow text against a dark background to set a party mood. You can also use the glow effect on buttons, borders, loading animations, hover animations, and more.

In the example below, the gradient button glows when the user hovers over it so that clicking it seems more appealing.

button using css glow animation

Source

CSS Bounce Animation

Let’s say you don’t want an element to slide in. You want it to bounce in for a grander entrance. In that case, you can use the CSS bounce animation. Coding this animation requires a few animation subproperties, including the timing and delay function, to be configured to make the element’s bounce feel more natural.

This animation is particularly common on loading pages, as shown in the example below.

loading page using CSS bounce animation

Source

CSS Fade-in Animation

Using CSS, you can add the fade-in animation to images and text on your site. Below you’ll see an image gradually appear from the top of the screen. This animation is particularly effective with this image because it mimics the motion of a boat lazily drifting down a river.

image using CSS fade-in animation

Source

For more interactivity, you can design the image or text to fade-in when a mouse hovers over the element or as a visitor scrolls. Please note that the latter will require both CSS and Javascript because it’s more complicated.

CSS Hover Animation

To enhance your site’s interactivity, you can create a CSS hover animation. This type of animation occurs when a site visitor hovers over an element on the page. You can have elements zoom, flip, rotate, or even stop playing on hover. In the example below, the CTA button changes in size and lets off some sparks when the visitor hovers.

button using CSS hover animation

Source

Infinite Loading Animation

When visiting some sites, you’ll watch them slowly load: usually the title comes first, then the plain body text comes, then the images, and so on. On other sites, that process will be hidden and instead, you’ll see an animation.

The infinite loading animation is just one of the three website loading animations you can make in CSS to help reduce the user’s perception of waiting. Since this type of animation lets visitors know the site is loading without specifying how long they’ll have to wait, this is perfect when load time is unknown.

Here’s a creative one by designer Hoang Nguyen.

Infinite loading CSS animation typeParallax Scrolling

Parallax scrolling is a visual technique in which elements in the background move at a different speed than the foreground as you scroll. This creates an illusion of depth or a “faux-3D effect” that’s intended to make your visitor’s browsing experience more interesting.

Below take a look at this demo site without parallax scrolling.

Demo site without CSS animation parallax scrolling 
Now take a look at this demo site with parallax scrolling to see how striking the visual effect is.
Demo site with specific type of CSS animation type, parallax scrolling

 

1. 7up Lemon Lemon

In 2017, PepsiCo released a new drink called 7up Lemon Lemon. To promote the premium sparkling lemonade, the 7up site was redesigned using CSS animation. Combining the fade-in and wobble animation, developers made the page fizz like the beverage.

7up Lemon Lemon CSS animation example

2. 2016 Kikk Festival

Each year, the agency dogstudio rebrands the Kikk Festival’s website. In 2016, dogstudio redesigned the site using CSS animation to create image and page glitches that represented the festival’s theme of “interference.”

2016 Kikk Festival CSS animation example

3. Apple iPad Pro

To promote the iPad Pro, Apple takes an interesting spin on parallax scrolling. Scrolling horizontally instead of vertically, you’ll observe the text, images, and other visual elements moving around at different speeds. These CSS animations keep visitors engaged as they scroll through the page to learn more about the product.

Apple iPad Pro CSS animation example4. In Pieces

Bryan James, a designer based in the UK, created an interactive exhibition called “Pieces” that profiles 30 endangered species. Using CSS animations, James designed the site to have the same 30 pieces arranging and rearranging themselves into the shape of each animal as you scroll through the exhibit.

In pieces CSS animation example

5. Jeans for Refugees

Jeans for Refugees is a global fundraising initiative that artist Johny Darde created to help refugees around the world. The agency Lilo created the Jeans for Refugees site pro bono to support the initiative. The agency used CSS animations to make elements that look like paint strokes form and re-form into words on the page.

Jean for Refugees CSS animation example

6. Chekhov Is Alive

Using color and fade-in, among many other CSS animations, developers were able to bring 30 of Anton Chekhov's most famous characters to life. Originally created so that users could audition to play a part in a live Google broadcast of Chekhov's stories in 2015, this personality test is still live so people can find out which Chekhov character they most closely resemble.

Chekhov is alive css animation example

7. MY / STATIC / SELF

The homepage of John Iacoviello’s personal portfolio is a testament to his skills as an award-winning programmer. Although the glitch effect applied to the central object (is it a stereo system? Hard drive?) is the most obvious, you might also notice that the bounce and rotate animation are being used.

MY / STATIC / SELF portfolio CSS animation exampleBringing Your Site to Life

From subtle transitions to a completely illustrated site, you can find animations on most websites today. Making 3D effects and interactive details part of your web design strategy can improve the visitor experience and differentiate your site from competitors.

New Call-to-action

 css introduction

Originally published Mar 25, 2020 7:00:00 AM, updated May 11 2020

Topics:

CSS Animation