Keyframes control the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. - MDN web docs

What Are Keyframes?

Keyframes are one of two halves responsible for front end animations built with CSS. Simply put, keyframes tell an element what it should look like and when it should look that way. Keyframe’s other half, CSS Animation properties, allow further animation traits to be configured (such as: animation duration, iterations, acceleration, etc.). These two halves working together allow for animations to be built quickly and easily while performing efficiently.

Why Use Keyframes?

Besides the awesome visuals and simplicity in its use, keyframes have numerous benefits for developers. First and foremost, you do not need to know JavaScript (or another scripting language). Simple animation in JavaScript can often lead to poor performance (if not written well), but keyframes can run well even under moderate system load. The rendering engine can utilize frame skipping and other techniques to keep the performance as smooth as possible. Allowing the browser to control the animation sequence helps optimize performance and efficiency by reducing the update frequency of animations running in non-visible tabs.

How To Use Keyframes?

You can imagine keyframes as a collection of rules, whereas each rule holds a set of styles and a percentage value. This percentage value translates to a specific point on the animation timeline. It is responsible for applying its set of styles on the element at its given time in the animation sequence.

Keyframes can be initialized by stating the @keyframe keyword followed by a unique name for the keyframe (to be used later in conjunction with an animation property to bind the animation to an element). Then, within the keyframe, you’ll define each step by defining a percentage value followed by an set of CSS property/values. These steps are syntactically similar to CSS selectors and should look familiar if you have experience with them.

// Syntax Example
@keyframes <keyframe-name> {
  <percentage-value> {
    <css-property>: <css-value>
  }
}
// Actual Example
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

The steps you’ll take to successfully utilize keyframes goes as follow:

• Define the keyframes (create the set of rules with appropriate styles and percentage values).
• Bind the keyframe onto the desired element (designate which element you want the styling blueprint applied to).
• Apply animation properties (finalize configurations of the animation)

Summary

Keyframe’s small learning curve and vast configurability make it an effective way to get amazing animations in little to no time. Simply define a keyframe with the desired styles at the appropriate animation intervals (via percentage values), then bind them onto an element and configure the rest of the animation sequence via CSS’ Animation properties.

Helpful Links and Tools

MDN Document (Keyframes)

MDN Document (Animations)

Basic Keyframe Animation Syntax

Can I Use

Animation Builder

Animatable CSS Properties