CSS Animation


Quick note about CSS animation.

CSS Animation

CSS3 animation lets an element gradually change from one style to another.

Two steps:

  1. Use @keyframes to define an animation.
  2. Set this animation on an element with animation properties

We could set properties one-by-one or with following shorthand:

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


It defines what the animation looks like at each stage of the animation timeline. It is composed of:

  • Name of the animation. For example, changeColor.
  • Stages: From 0% to 100% to represent the whole process of animation
  • CSS Properties: The CSS properties defined for each stage of the animation timeline.

Following example creates an animation called changeColor and assign it to div:hover:

@keyframes changeColor {
	0% {
		background: red;
	60% {
		background: blue;
	    background: green;

  animation: changeColor 5s ease .1s;

In above example, we could also use from to represent 0% and to to represent 100%

Animation Properties

It has following properties:

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. animation-play-state


The name of the animation, defined in the @keyframes.


The duration of the animation, in seconds (e.g., 5s) or milliseconds (e.g., 200ms).


The speed curve or pace of the animation:

Timing Function Description
linear The animation has the same speed from start to end
ease Default value. The animation has a slow start, then fast, before it ends slowly.
ease-in Start slowly and end fast.
ease-out Start more quickly than linear ones and end slowly. The opposite of ease-in.
ease-in-out Both a slow start and a slow end
initial Sets this property to its default value. So ease.
inherit Inherits this property from its parent element.

Check The basics of easing for details.


It specifies when the animation will start. The value is defined in seconds (s) or milliseconds (mil).


It specifies the number of times that the animation will play. The possible values are:

  • a specific number of iterations (default is 1)
  • infinite - repeats forever
  • initial
  • inherit


It specifies whether the animation should play forward, reverse, or in alternate cycles.

  • normal - Default. On each cycle the animation resets to the beginning state (0%) and plays forward again (to 100%).

  • reverse - On each cycle the animation resets to the end state (100%) and plays backwards (to 0%).

  • alternate - On each odd cycle, the animation plays forward (0% to 100%). On each even cycle, the animation plays backwards (100% to 0%).

  • alternate-reverse - On each odd cycle, the animation plays in reverse (100% to 0%). On each even cycle, the animation plays forward (0% or 100%).


It specifies if the animation styles are visible before or after the animation plays.

  • normal - Default. The animation does not apply any styles to the element, before or after the animation.

  • forwards - After the animation is finished, the styles defined in the final keyframe (100%) are retained by the element.

  • backwards - Before the animation (during the animation delay), the styles of the initial keyframe (0%) are applied to the element.

  • both - forwards with backwards.


Two values: running and paused.

It specifies whether the animation is playing or paused. Resuming a paused animation starts the animation where it was left off. But if pause an animation, the element style will return back to its origin.


div:hover {
  animation-play-state: paused;

Multiple Animations

Add multiple animations to a selector with comma:

div {
	animation: animationA 2s, animationB 2s;


Post Directory