The Guide to CSS3 Animations

They were already considered extinct. And nobody wanted her anymore.

However, many years ago, so soon after the onset of the Internet, at the time of the commercial breakthrough, they were ubiquitous:
First the animated GIFs in the form of rotating logos and flashing menus and buttons. Later then the Flash websites and the accompanying extensive animations.

Flash technology is no longer relevant today. Animations again. For years, they were a marginal phenomenon, but now hardly a modern website comes without animations.

What a comeback – and they have come back to stay.

Animations were frowned upon for many years because they were understood and used as a gimmick. As a nice gimmick, which offers little benefit, but a lot of “show”. In the end, however, the visitor from the operation stops, or unnecessarily difficult.

Of course, that’s still possible on websites today. Much more often, however, animations are used to facilitate the operation and to increase the user experience. Animations make websites a little bit more lively.

jQuery and other JavaScript frameworks ensured that animation effects spread almost like an inflationary one. And in recent years, CSS3 has expanded the scope of animation options.

CSS3 offers what was previously only possible with JavaScript and even goes one step further: it’s quick and easy to create animations.

This article aims to show the possibilities of CSS3 quickly and easily to create interesting animations and effects. In addition to the technical implementation, some examples and applications are presented.

The animation options with CSS3

An animation is change and movement. Our whole life is, so to speak, “animation”.

On websites, animation means a change of an object. For example, this may mean moving the object from A to B, changing the color, or the shape.

Animation also means that this change does not happen abruptly, from one moment to the other, but more or less slowly over several single steps. Normally, the observer does not notice these, because they run very fast one behind the other (as in the movies).

CSS3 thus offers the possibility to change individual CSS properties over a defined period of time.

Animation flow from a start to an endpoint.

CSS3 offers two types of animation:
Transitions & Animations

The two species are quite similar on the one hand. It can be …

  • determine which CSS property (s) should be animated.
  • set the duration of the animation.
  • set the speed of the change (eg linear or faster first, then slower).
  • determine when the animation should be executed.

The difference lies in how the two types of animation can be triggered, whether they loop (repeat) and how extensive 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. The CSS transitions are limited in use. The most common use is with the CSS pseudo-class :hover . But the implementation is quite simple.

A typical application is, for example, a button that animates its background color when mouseover. Not abrupt, but flowing.
Or a link whose text color changes fluently. Or a preview image whose transparency increases.

CSS Animation hover

Typical transition:
Mouseover changes the appearance of the item.

To define a transition, at least the following two details are required:

transition-property
Defines the CSS property to be modified (eg color, background color or position).

transition-duration
Defines the animation duration.

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 spelling is clear.
But you can also summarize the instructions in a shorthand way:

transition: background-color 1s;

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

In addition, the following two details can be defined:

transition-timing-function
The animation is usually linear, allowing you to control the speed. There are other values ​​that influence the speed behavior:

linear Constant speed (ie the same behavior as if not specified).
ease The transition starts slowly, becomes fast and ends slowly.
ease-in The transition begins slowly, ending quickly.
ease-out The transition starts fast, ends slowly.
ease-in-out The transition starts slowly, gets fast and ends slowly again.

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

The button script 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 ( display for example, not). An overview can be found at W3C – Properties from CSS .

With CSS3 Transitions, CSS properties can be changed over a set period of time.

browser compatibility

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

-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

With CSS3 so-called keyframe animations can be generated. The animation then no longer runs only from a start to a final state, but over several keyframes (the keyframes), representing the intermediate states of the animation. This gives you more 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 lies in the fact that here no special interaction of the user (like a mouseover) is required, but these can also be executed selbstädnig (eg directly after loading the page).

CSS Keyframe Animation

With CSS3 keyframes, more complex animations can be implemented using keyframes.

A keyframe animation consists of two parts:

1. The @keyframe rule

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

@keyframes name-animation { from { // Eigenschaften am Beginn der Animation } to { // Eigenschaften am Ende der Animation } }

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

2. Animation call

The animation rule can now be called by any CSS selectors. It behaves a bit like a variable in programming.

.name-selektor { animation-name: name-animation; // Name der Animation animation-duration: 1s; // Dauer der Animation animation-iteration-count: infinite; // Anzahl der Wiederholungen }

With the help of the property animation-name , the corresponding keyframe rule is called in the selector by its name.
animation-duration determines the duration of the animation in seconds.
And with animation-iteration-count the number of repetitions is determined. infinite ensures infinite repetitions, alternatively a numerical value can be entered.

The shorthand notation would be the following:

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

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

animation-timing-function History of the animation speed. Default value is ease.
animation-delay Delay, the start of the animation. Default is 0.
animation-direction Direction of the animation. Standard is normal (forward). Alternatively, there is reverse .
animation-fill-mode Indicates whether the changes are visible during a break or after the animation. Possible values ​​are none (initial state) or backwards (state at the beginning of the animation).

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 initial and final state can be defined, but also any number of keyframes in between. If there are more than two images, these are then specified in percentages (on the timeline):

@keyframes name-animation { 0% { // Eigenschaften am Beginn der Animation } 50% { // Eigenschaften in der Mitte der Animation } 100% { // Eigenschaften am Ende der Animation } }

The following example uses five keyframes to change the background color and the border-radius:

 

The syntax for CSS3 multi-keyframe animation contains a lot of CSS code. That means too extensive animations are very quickly confusing and hard to overlook. Above all, you can not create any dependencies with CSS alone, so that, for example, an animation automatically starts only when another one has stopped. Here you will not get around to JavaScript. Similarly, if you want to trigger the start of the animation at a certain time (eg if the user has scrolled to a certain point).

CSS3 libraries

CSS3 keyframe animations can not only be cluttered, but also very fast in the creation. Since you do not always have to reinvent the wheel, there are already some CSS3 animation libraries. So practical collections of ready-made CSS3 effects.

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

Typical examples of the meaningful use of such CSS3 libraries are:

  • Button Effects
  • Caption animation
  • Page Transitions
  • Pop-up window
  • Off Canvas menus for responsive webdesigns

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

Animate.css
Magic.css
Effeckt.css
Anima Table

performance

With animations, you quickly get to the question of how “smoothly” they run and how it behaves with the loading time.

Browsers “draw” the page 60 times a second, meaning that the elements are (re) drawn approximately every 16 milliseconds. Any change through animations must recalculate the browser, which can be very expensive. If it takes longer for a “frame”, the next one or the next one is left out, so it can sometimes come to “jerks”.

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

Das Browser Waterfall-Prinzip

The four steps of the browser to display elements on the screen.
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 on elements have changed. If so, then these elements are recalculated, including possibly inherited elements (ie child elements).

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

Paint
The browser “draws” each element with its assigned styles to individual layers. Similar to layers in Photoshop, which are superimposed.

composite
After all elements have been created in layers, they are placed on the screen. It’s as if in Photoshop all layers would be drawn into a picture.

The waterfall principle means the earlier a change takes place, the more work the browser has, as it also affects the following steps. If the properties transform or opacity changed, he has the least work.

If, on the other hand, the position ( left , top ) or the outer dimensions ( width , height ) are changed, then the browser must also go through the layout , paint and composite steps and edit them again.

The CSS Triggers page provides an overview of which CSS properties begin at which point in the waterfall process.
And this table shows the most popular CSS properties that are being changed, most of them in layout.

Especially with regard to mobile devices so animations should be used wisely, since here the computing power is lower. If you are already surfing with smaller screens, you do not want to have to use jerky pages.

Tip:
The position and size of an element can not be changed with left, top and width, height, since these already start with the layout.
Instead, set better to transform: translate (npx, npx) and 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 omnipresent. They can facilitate the use and increase the user experience (the user experience).

The animations are like everywhere in life:
In moderation yes, just not in bulk.

With CSS3 animations you already have some great options. The transitions are enough for simple animations. If animations are to be played over and over again or if they are to be slightly more complex (with several keyframes), then there are the @keyframe animations. And for “completely wild” stuff, there is JavaScript.