Animations, transitions and transformations

Animations

CSS3 has native support for animations, which allow for the animating of transitions between CSS styles. CSS animations are made up of two key components:

• CSS styles which describe the animation
• Keyframes which indicate the start, intermediate and end states of the animation

Key benefits of CSS animations are the bypassing of JavaScript, which in most instances will have performance deficits compared to the built-in rendering engine of the browser, enabling a web designer who does not know JavaScript to create animations for web pages.

Animation properties

CSS provides a multitude of properties for configuring an animation, and just like other properties, it provides a shorthand animation property.

animation-delay

Used to specify the delay between when an element loads and the start of the animation.

animation-direction

Specifies the direction of an animations first run, forward or backward, and whether subsequent runs will alternate direction or reset.

animation-duration

Used to specify an animations length.

animation-fill-mode

Used to specify the way styles applied to an animation before and after it executes.

animation-iteration-count

Specifies how many times an animation should repeat.

animation-name

Specifies the name of animation for targeting by the keyframe rules.

animation-play-state

Specifies whether an animation should be running or stopped.

animation-timing-function

Used to specify the rate of transitions through keyframes.

Specifying keyframes

Animation keyframes are specified using the @keyframes at-rule, an animation-name must be specified, a from rule and a to rule at a minimum. The following example demonstrates an animation sliding in a paragraph from off the left of the page to right:

• Press the Render button or reload the page to see the animation.

Intermediary keyframes can be added to make the transition smoother or add effects by specifying a percentage in the keyframes:

This example increases the size of the font during the animation and makes the change permanent by applying the animation-fill-mode: forwards property.

Let's create an animation that infinitely repeats sliding-in text from the right instead:

To prevent an overflow from occuring when sliding-in the content, the animated element was placed inside a div with overflow: hidden applied. To prevent the text from starting as a huge gobbled mess, we also apply a larger than normal width and reduce it to the size of the container (100%) during the course of the animation. Setting the animation-iteration-count to infinite repeats the animation over and over.

The animation shorthand

The animation shorthand property can be used to specify all of the properties of an animation:

animation: duration timing-function delay iteration-count direction fill-mode play-state name

The prior slide-in from the right animation, without infinitely looping but instead alternating in direction for 3 iterations, could then be specified as follows:

Transitions

Transitions are useful when there is some kind of animation whose speed you want to control, changes occur through automatic calculations that follow a specified acceleration curve.

Transition properties

We can define transitions using a selection of CSS properties, these transitions can be applied to most CSS properties, a list of properties can be found here.

Just like the animation property, a shorthand transition property is available. First, lets go through the available properties that make it up though:

transition-property

Used to specify which CSS properties a transition should be applied to.

transition-duration

Used to specify the duration of a transition, a single value can be specified or multiple to allow properties to transition over different time periods.

transition-timing-function

Used to specify how intermediate values for properties are computed, done by way of an easing function.

transition-delay

Used to specify the time between a property changing and the transition beginning.

The short-hand property follows the form:

transition: property duration timing-function delay;

Example transitions

The first example demonstrates a box that rotates 360 degrees, shrinks in size and changes colour on hover:

The transition property was applied to the box class rather than the psuedo-class hover selector. This enables the animation to occur on hover and when the cursor is removed from the hover.

CSS transforms

CSS transformations allow for changing the shape and position of content without disrupting nromal flow, this is done by modifying the coordinates of the element in the document. Transformations are only applicable to block-level elements.