This guide shows you the CSS3 animation possibilities: CSS3 transitions and keyframe animations are explained in practical examples. CSS3 libraries are presented for this purpose.

Animations in web design

Animations were frowned upon for many years because they were understood and used as a gimmick, which offers little use, but a lot of “show”. In the end, however, it prevents the visitor from operating or makes it unnecessarily difficult.

Of course, today we still find them on websites. Much more often, however, we use animations to facilitate operation and to increase the user experience. Animations make web pages a bit more vivid.

jQuery and other JavaScript frameworks ensured that animation effects have spread almost in an inflationary manner. Also in recent years, thanks to CSS3, the scope for CSS3 animation has been expanded.

CSS3 offers what was previously only possible with JavaScript and goes even further: To create animations quite quickly and easily.

This article is intended to show the possibilities of CSS3 quickly and easily to create interesting animations and effects. In addition to the technical implementation, we present some examples.

The animation possibilities with CSS3

On Web pages, animation means a change in an object. This can mean, for example, that the object moves from A to B, and changes its color, or shape.

Animation also means that this change does not happen abruptly, from one moment to the next, but more or less slowly over several individual steps. The observer usually does not notice this, as they run very quickly in succession.

CSS3 offers two types of animation: Transitions & Animations

On the one hand, the two species are quite similar. It can be used to …

• determine which CSS property(s) to animate.
• set the duration of the animation.
• adjust the speed of the change.
• when to perform the animation.

The difference is how the two types of animation can be triggered, whether they can be looped (i.e. repeated), and how extensively the change can be adjusted. Let’s take a closer look at the two CSS3 animation options:

CSS3 transitions: Simple animations and transitions

Transition is a transition from an initial state to a final state. CSS transitions are limited in use. The most common use is with the CSS pseudo-class. Also, The implementation is quite simple.:hover

Typical areas of application are, for example, a button that animates its background color during a mouseover. So not abruptly, but fluently.
Or a link whose text color changes fluently. Or a preview image whose transparency is increasing.

To define a transition, you need at least the following two:

transition-property
Defines the CSS property to be changed (e.g. background color, or position).

transition-duration
Defines the animation duration.

So for an example button, the CSS code might look like this:

.button {
  background-color: #333;
  transition-property: background-color;
  transition-duration: 1s;
}
.button:hover {
  background-color: #555;
}

This code is clear.
You can also summarize the instructions in shorthand:

transition: background-color 1s;

The animation is triggered when the mouse pointer is over the button. The change in background color then takes one second.

In addition, the following two pieces of information can be defined:

transition-timing-function
The animation is usually linear, which allows the speed curve to be regulated. There are other values that can be used to influence the speed behavior:

And then there is. This can delay the start of the animation.transition-delay

The button code could be extended as follows:

.button {
  background-color: #333;
  transition-property: background-color;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
  transition-delay: .5s;
}
.button:hover {
  background-color: #555;
}

And the short notation:

transition: background-color 1s ease-in-out .5s;

Only certain CSS properties can be controlled with the transitions. An overview can be found at the W3C – Properties from CSS.display

Browser compatibility

To ensure compatibility with older browsers, you should use the appropriate vendor prexifes:

-webkit-transition: background-color 1s ease-in-out .5s; // Safari
-moz-transition: background-color 1s ease-in-out .5s; // Fireforx
-o-transition: background-color 1s ease-in-out .5s; // Opera
transition: background-color 1s ease-in-out .5s;

Keyframe animations with CSS3

CSS3 can also be used to create keyframe animations. The animation then runs not only from an initial to a final state but over several keyframes that represent intermediates of the animation. This gives you greater control over the course of the animation and can also implement more complex changes. Of course, the source code is correspondingly more extensive/complex.

The other big difference to the transitions is that no special interaction of the user (like a mouseover) is required here, but they can also run self-decoded (e.g. directly after loading the page).

A keyframe animation consists of two parts:

1. The @keyframe rule

Sets the name and determines the sequence of the animation. For this purpose, keyframes are determined (at least a start and end state) and which CSS properties should change.

@keyframes name-animation {
  from { 
         // Properties at the beginning of the animation
       }
  to { 
         // Properties at the end of the animation
      }
 }

This is a simple CSS3 animation that uses two keyframes to determine the beginning and end of the animation.

2. Animation Call

Now we can call the animation rule by any CSS selector. It behaves a bit like a variable when programming.

.name-selektor {
  animation-name: name-animation;  // Name of Animation
  animation-duration: 1s; // Duration of Animation
  animation-iteration-count: infinite; // Number of repetitions
}

The property in the selector calls the corresponding keyframe rule by its name.
Determines the duration of the animation in seconds.
And it determines the number of repetitions. provides for infinite repetitions, alternatively, a numerical value can be entered.animation-nameanimation-durationanimation-iteration-countinfinite

The short notation would be as follows:

.name-selektor {
  animation: name-animation 1s infinite; 
}

There are also other properties that can be used to control the animation flow:

The shorthand of the many animation properties would look like this:

.name-selektor {
  animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode;
}

More complex animations with CSS3

The exciting thing about the @keyframe rules is that not only the start and end states can be defined, but also any number of keyframes in between.

@keyframes name-animation {
  0% {
    // Properties at the beginning of the animation
  }
  50% {
    // Properties in the middle of the animation
  }
  100% {  
    // Properties at the end of the animation
  }
}

The following example changes the background color and the over five keyframes:border-radius

https://web.archive.org/web/20201218130618/https://codepen.io/itechonics/embed/KKgqoZw?height=265&theme-id=light&default-tab=result&user=itechonics&slug-hash=KKgqoZw&pen-title=CSS3%20Keyframes&name=cp_embed_1

The syntax for MULTI-keyframe CSS3 animations contains a lot of CSS code. That means too extensive animations become very quickly confusing and almost impossible to see. Above all, CSS alone does not create dependencies, so that, for example, one animation does not automatically start until another one has stopped. You won’t get around JavaScript here. Likewise, if you want to trigger the start of the animation at a certain point in time (e.g. if the user has scrolled to a certain location).

CSS3 Libraries

CSS3 keyframe animations can not only become confusing but also quickly very complex during creation. Since you don’t always have to reinvent the wheel, there are already some CSS3 animation libraries. So practical collections of prefabricated CSS3 effects.

You include a style sheet and the elements you want to animate are assigned a corresponding CSS class. Some of these libraries also need to include a JavaScript or jQuery script, but this is explained in each case.

Typical examples of how to use such CSS3 libraries wisely are:

• Button Effects
• Image title animation
• Page Transitions
• Pop-up window
• Off-Canvas menus for responsive web designs

There are some animation libraries, the following are definitely worth a look:

Animate.css
Magic.css
Effeckt.css
Animatable

Performance

With animations, one quickly gets to the question of how “smooth” they run and how it behaves with the loading time.

Browser “draws” the page 60 times per second, which means approximately every 16 milliseconds the elements are (redrawn). Any change through animations has to be recalculated by the browsers, which can be very expensive. If a “frame” takes longer, the or the next one is omitted, so there may be “rucks”.

When recalculation, the browser goes through four steps, a waterfall principle:

Source: HTML5 Rocks – High-Performance Animations

The four steps mean in detail:

Recalculate Style
The browser first checks the source code to see if classes, CSS styles, or attributes have changed for elements. If so, these elements are recalculated, including possibly inherited elements (that is, child elements).

Layout
The browser then calculates the size and position of each item in the browser window.

Paint
The browser “draws” each item with its assigned styles on individual layers. Similar to layers in Photoshop that lie on top of each other.

Composite
After elements are created in layers, they are placed on the screen. It’s like in Photoshop all layers are being dragged into one image.

The waterfall principle means that the earlier a change takes place, the more work the browser has, as it also affects the following steps. If the characteristics are changed or changed, he has the least work.transformopacity

If, on the other hand, the position (, ) or the dimensions (, ) are changed, then the browser must also go through the steps Layout, Paint, and Composite and edit them again.lefttopwidthheight

The CSS Triggers page provides an overview of which CSS properties start at which point in the waterfall process.

Especially with regard to mobile devices, animations should be used wisely, as the computing power is lower here. If you are already surfing with smaller screens, you don’t want to have to operate even more jerky pages.

The article you may be interested in 10 Best Tools to Test the Loading Speed of Websites Worldwide.

Tip:

The position and size of an element do not change with left, top and width, or height, because they start with the layout.
Instead, better put on and set.transform: translate (npx, npx)transform: scale(n)

Conclusion

Animations can be the salt in the soup. The wild flash times are over. But parallax effects, incoming mobile menus, or animated mouseover effects are ubiquitous. They can make it easier to use and increase the user experience.

With the animations it is like everywhere in life: in moderation yes, but not in masses.

If you want to know more about animations, I can recommend the following articles: 

The ultimate guide to Web animation
All About CSS Animations
High-Performance Animations
Myth Busting: CSS Animations vs. JavaScript

And now to you:
Could the guide help you or do you miss important aspects?
Let me know in the comments!