CSS: animations

CSS provides features to animate HTML elements without using JavaScript. You can create simple animations via transitions, but using animations gives you much more control over how changes occur.

CSS Keyframes

A set of keyframes at-rules define styles for different states of the animation on the intermediate steps of the animation sequence. Each keyframe includes an identifier, keyframe selectors and styles. General syntax:

@keyframes identifier {
  keyframe_selector {
    property: value;
    property: value;
  }

  keyframe_selector {
    property: value;
    property: value;
  }
}

Keyframes selectors take either percentage values or keywords – from and to. The from keyword is equivalent to the 0% value and the to keyword is equivalent to the 100%.

@keyframes changeColor {
  0% {
    color: #8fbaff;
  }

  33% {
    color: #1c67e6;
  }

  100% {
    color: white;
  }
}

@keyframes changePositions {
  from {
    left: 0px;
  }

  to {
    left: 450px;
  }
}

CSS animation-name property

The property defines the one or more animation name that is set in @keyframes as identifier.

p {
  animation-name: myAnimation;
}

@keyframes myAnimation {
  ...
}

CSS animation-duration property

The property specifies the duration that takes one animation’s iteration. It takes a value as seconds (s) and milliseconds (ms).

div {
  animation-duration: 2.5s;
}

CSS animation-delay property

The animation-delay property specifies time before animation starts and iterates. It also takes either seconds (s) or milliseconds (ms) as a value. The initial value is 0s.

div {
  animation-delay: 30s;
}

CSS animation-iteration-count property

The property configures the number of iteration. The default value is 1. The property may take a number or the infinite keywords as a value.

div {
  animation-iteration-count: 7;
}

CSS animation-timing-function property

The property defines the animation flow over one iteration. It takes either keyword or Cubic Bezier curve function or steps function as a value. Keyword values are calculated via Cubic Bezier function and in the most cases:

• linear - the same speed during the whole animation;
• ease (default) - slow start, fast middle, slow end;
• ease-in - slow start and gradually increasing speed until the end;
• ease-out - fast start and gradually slowing down speed until the end;
• ease-in-out - slow start, increasing speed in the middle and slowing down in the end.

div {
  animation-timing-function: linear;
}

button {
  animation-timing-function: ease-out;
}

CSS animation-direction property

The property specifies the direction of animation’s progression through the keyframes. It defines where the animation starts and ends first and at each iteration. It takes four values:

• normal (default) - the animation is played forward;
• reverse - the animation is played backward;
• alternate - first the animation is played forward, then backward;
• alternate-reverse - first the animation is played backward, then forward.

div {
  animation-direction: reverse;
}

CSS animation-fill-mode property

The property configures whether or not animation’s styles are applied before the start and after the end of the animation’s execution. It takes four values:

• none (default) - no styles are applied before and after execution;
• forward - the styles that are set by the last keyframe is preserved;
• backward - the styles that are set by the first keyframe is preserved;
• both - the styles that are set by the first and the last keyframes are preserved.

div {
  animation-fill-mode: both;
}

CSS animation-play-state property

The property defines whether the animation is paused or running. It takes either running or paused values. The running value is by default.

div {
  animation-play-state: paused;
}

CSS animation property

A shorthand property that lets you set all animation properties at once. The syntax:

div {
  animation: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state;
}

div {
  animation: changeColor 2.5s linear 30s 7 reverse both running;
}