CSS animations make it possible to animate transitions from one CSS style configuration to another.

CSS transitions outperform jQuery by offloading animation logic to the browser itself, which is efficient at

  • Optimizing DOM interaction and memory consumption to avoid stuttering,
  • Leveraging the principles of RAF under the hood
  • Forcing hardware acceleration.

The animation property in CSS can be used to animate many 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, like so:

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

Each @keyframes at-rule defines what should happen at specific moments during the animation. For example, 0% is the beginning of the animation and 100% is the end. There are eight sub-properties through which we can control the animation.

  • animation-name : declares the name of the @keyframes at-rule to manipulate.
  • animation-duration : the length of time it takes for an animation to complete one cycle.
  • animation-timing-function : establishes preset acceleration curves such as ease or linear.
  • animation-delay : the time between the element being loaded and the start of the animation sequence.
  • animation-direction : sets the direction of the animation after the cycle. Its default resets on each cycle.
  • animation-iteration-count : the number of times the animation should be performed.
  • animation-fill-mode : sets which values are applied before/after the animation.
  • animation-play-state : pause/play the animation.

Here is my jsfiddle reference for a simple animation.

References: