CSS Animations

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.

CSS animations allows animation of most HTML elements without using JavaScript or Flash!

What are CSS Animations?

The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width. Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property

CSS Transitions provide a way to interpolate CSS property values when they change as a result of underlying property changes. This provides an easy way to do simple animation, but the start and end states of the animation are controlled by the existing property values, and transitions provide little control to the author on how the animation progresses.

An animation does not affect the computed value before the application of the animation (that is, when the animation-name property is set on an element) or after it is removed. Furthermore, typically an animation does not affect the computed value before the animation delay has expired or after the end of the animation, but may do so depending on the animation-fill-mode property.

This proposal introduces defined animations, in which the author can specify the changes in CSS properties over time as a set of keyframes. Animations are similar to transitions in that they change the presentational value of CSS properties over time. The principal difference is that while transitions trigger implicitly when property values change, animations are explicitly executed when the animation properties are applied. Because of this, animations require explicit values for the properties being animated. These values are specified using animation keyframes, described below.

Many aspects of the animation can be controlled, including how many times the animation iterates, whether or not it alternates between the begin and end values, and whether or not the animation should be running or paused. An animation can also delay its start time.

There are three key advantages to CSS animations over traditional script-driven animation techniques:

They’re easy to use for simple animations; you can create them without even having to know JavaScript.
The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript (unless they’re well made). The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that are not currently visible.

Defining the animation sequence using keyframes

Once you’ve configured the animation’s timing, you need to define the appearance of the animation. This is done by establishing two or more keyframes using the @keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.

To get an animation to work, you must bind the animation to an element.

Example -

The keyframes are defined using the @keyframes at-rule. In this case, we have just two keyframes. The first occurs at 0% (using the alias from). Here, we configure the left margin of the element to be at 100% (that is, at the far right edge of the containing element), and the width of the element to be 300% (or three times the width of the containing element). This causes the first frame of the animation to have the header drawn off the right edge of the browser window.

The second (and final) keyframe occurs at 100% (using the alias to). The left margin is set to 0% and the width of the element is set to 100%. This causes the header to finish its animation flush against the left edge of the content area.

Example -

The following example will show you how to animate a

box horizontally from one position to another using the CSS3 animation feature.

Example -

Keyframes are used to specify the values for the animating properties at various stages of the animation. Keyframes are specified using a specialized CSS at-rule — @keyframes. The keyframe selector for a keyframe style rule starts with a percentage (%) or the keywords from (same as 0%) or to (same as 100%). The selector is used to specify where a keyframe is constructed along the duration of the animation.

Percentages represent a percentage of the animation duration, 0% represents the starting point of the animation, 100% represents the end point, 50% represents the midpoint and so on. That means, a 50% keyframe in a 2s animation would be 1s into an animation.

Example -

Delay an Animation

The animation-delay property defines when the animation will start. It allows an animation to begin execution some time after it is applied, or to appear to have begun execution some time before it is applied.

Example -

Animation Shorthand Property

There are many properties to consider when creating the animations. However, it is also possible to specify all the animations properties in one single property to shorten the code.

The animation property is a shorthand property for setting all the individual animation properties at once in the listed order. For example:

Example -

The animation-delay property is usually specified as part of the animation shorthand property.

Example -

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, 
  Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 50px auto;
  width: 90%;
  max-width: 700px;
  padding: 30px;
  border: 1px solid #aaa;
  background-color: white;
}

.element {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: relative;
  top: 0;
  left: 0;
}

.container:hover .element {
  -webkit-animation-name: moving;
  animation-name: moving;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.element-a {
  background-color: yellow;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.element-b {
  background-color: green;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.element-c {
  background-color: red;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.element-d {
  background-color: blue;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

@-webkit-keyframes moving {
  from {
    left: 0;
    top: 0;
  }
  15% {
    left: 50px;
    top: -50px;
  }
  30% {
    left: 100px;
    top: 0;
  }
  45% {
    left: 150px;
    top: -50px;
  }
  60% {
    left: 200px;
    top: 0;
  }
  75% {
    left: 250px;
    top: -50px;
  }
  100% {
    left: 300px;
    top: 0;
  }
}

@keyframes moving {
  from {
    left: 0;
    top: 0;
  }
  15% {
    left: 50px;
    top: -50px;
  }
  30% {
    left: 100px;
    top: 0;
  }
  45% {
    left: 150px;
    top: -50px;
  }
  60% {
    left: 200px;
    top: 0;
  }
  75% {
    left: 250px;
    top: -50px;
  }
  100% {
    left: 300px;
    top: 0;
  }

Set How Many Times an Animation Should Run

The animation-duration CSS property specifies the length of time that an animation should take to complete one cycle.The animation-duration property is used to specify how long the animation cycle should take.

Example -

Syntax

Example -

Run Animation in Reverse Direction or Alternate Cycles [animation-direction]

The animation-direction property specifies whether or not an animation should play in reverse on some or all cycles or iterations.

The animation-direction property can have the following values:

normal - The animation is played as normal (forwards). This is default
reverse - The animation is played in reverse direction (backwards)
alternate - The animation is played forwards first, then backwards
alternate-reverse - The animation is played backwards first, then forwards

The following example will run the animation in reverse direction (backwards):

Example -

The following example uses the value "alternate" to make the animation run forwards first, then backwards:

Example -

Same as alternate except in reverse order. Therefore, the odd-numbered cycles are played in reverse direction and the even-numbered cycles are played in normal direction.

The following example uses the value "alternate-reverse"

Example -

Specify the fill-mode For an Animation

The animation-fill-mode property defines what values are applied by an animation outside the time it is executing. More specifically, it defines what styles are applied to the element during the animation delay time, and after the animation has finished execution.

By default, an animation will not affect property values between the time it is applied (the animation-name property is set on an element, or the animation shorthand property) and the time it begins execution (which is determined by the animation-delay property). Also, by default an animation does not affect property values after the animation ends (the end of the animation is determined by the animation-duration and animation-iteration-count properties). The animation-fill-mode property can override this behavior.

Syntax:

animation-fill-mode: none | forwards | backwards | both

The animation-fill-mode property can have the following values:

none - Default value. Animation will not apply any styles to the element before or after it is executing
forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
backwards - The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions

The example below shows the animation-fill-mode property in action.

Example -

The style values set by the first keyframe before the animation starts (during the animation-delay period):

Example -

The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.

Example -

Specify the Speed Curve of the Animation

The animation-timing-function CSS property specifies how a CSS animation should progress over the duration of each cycle.

The animation-timing-function property specifies the speed curve of the animation.

The animation-timing-function property can have the following values:

ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)
linear - Specifies an animation with the same speed from start to end
ease-in - Specifies an animation with a slow start
ease-out - Specifies an animation with a slow end
ease-in-out - Specifies an animation with a slow start and end
cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function

Example -

Animation Shorthand Property

Example -

CSS Animation Properties

Property	Description
@keyframes	Specifies the animation code
animation	A shorthand property for setting all the animation properties
animation-delay	Specifies a delay for the start of an animation
animation-direction	Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration	Specifies how long time an animation should take to complete one cycle
animation-fill-mode	Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count	Specifies the number of times an animation should be played
animation-name	Specifies the name of the @keyframes animation
animation-play-state	Specifies whether the animation is running or paused
animation-timing-function	Specifies the speed curve of the animation