Keyframes in CSS

Have you ever seen text slide in or a button bounce on a website? That’s done using animations. In CSS, we use something called keyframes to create these cool effects. In this blog, we will explain what keyframes are, how they work, and provide some simple examples.

Table of Contents:

• What are CSS Keyframes?
• CSS Keyframes Syntax
• Keyframes Timing Functions
• Using Keyframes with Animation
• CSS Animation Properties
• Multiple Animations
• Examples of CSS Keyframes
• CSS Animation Performance Tips
• CSS vs JS Animations
• Conclusion

What are CSS Keyframes?

CSS keyframes let you create animations on a webpage. They tell the browser what styles an element should have at different times during the animation, like the beginning, middle, and end.

For example, you can use keyframes to move an object, change its color, or make it fade in. You write the steps using @keyframes, and then apply the animation to an element with the animation property.

CSS Keyframes Syntax

Here is the syntax of CSS keyframes:

@keyframes animation-name {
  0% {
    /* styles at the start */
  }
  100% {
    /* styles at the end */
  }
}

Explanation:

• @keyframes: This is the rule that defines the animation.
• animation-name: The name you assign to your animation. You’ll use this name when applying the animation to an element.
• 0%, 50%, 100%: Animation progress is shown by the percentages:
  • 0% is the start
  • 100% is the end
• You can also add in-between steps like 25%, 50%, etc.
• Inside each { }, you write the CSS styles you want at that point.

Example of CSS Keyframes

Here is a simple example of CSS keyframes to move a box from left to right.

Output:

Learn to Build Stunning Websites and Apps from Scratch

Master Web Development

Explore Program

Keyframes Timing Functions

Timing functions control how the speed of an animation changes over time, whether it starts slow, speeds up, or stays the same. They’re used with the animation-timing-function property. Some common timing functions are given below:

Using Keyframes with Animation

You need two parts to create an animation in CSS:

• @keyframes – defines what happens during the animation (the steps).
• animation properties – tell the element how to play the animation.

For example:

You want a box to fade in and move to the right using CSS keyframes.

Output:

Animation properties used:

• animation-name: the name of the keyframes (fadeAndMove).
• animation-duration: how long the animation takes (3s).
• animation-timing-function: how the speed changes (ease-in-out means slow → fast → slow).
• animation-iteration-count: how many times it runs (1 means once).

CSS Animation Properties

Here is the basic overview of key CSS animation properties used with keyframes:

NOTE: You can use multiple properties in one shorthand. For example,

animation: fadeIn 3s ease-in 1s 2 alternate forwards;

(That means: name, duration, timing, delay, count, direction, fill mode)

Multiple Animations

You define multiple @keyframes and then list their names and properties in the animation or related properties.

Example: We will make a box blue, turn it red, and move horizontally to the right and the left.

Output:

NOTE:

• Each animation property (like animation-name, animation-duration, etc.) can accept multiple values, separated by commas.
• The first value applies to the first animation, the second to the second, and so on.
• All animations run at the same time unless you add different animation-delay values.

Examples of CSS Keyframes

These are some additional ideas on how to use CSS keyframes in a unique way:

1. Rotate

We are going to spin an object circularly by CSS keyframes.

Output:

Explanation:

• body defines display: flex, align-items: center, and justify-content: center to center the element with the class of .box inside the viewport.
• height: 100vh makes sure the body fills up the whole screen height.
• The .box spins continuously in the center.

2. Pulse (Heartbeat)

We will make an object move like a heartbeat using CSS keyframes.

Output:

Explanation:

• border-radius: 50%; makes the box a circle.
• animation: pulse 1s ease-in-out infinite; loops the pulse animation elegantly and endlessly.
• transform: scale(…); enlarge and undo enlargement of the circle as the animation goes on.

3. Flip Card Effect

CSS keyframes will be used to flip an object, such as a card.

Output:

Explanation:

• animation: flip 2s ease-in-out infinite alternate; runs the flip animation smoothly, back and forth, forever.
• transform: rotateY(…); rotates the element clockwise or counterclockwise on the Y-axis to make a flipping effect.
• transform-style: preserve-3d; Maintains a 3D appearance when the flip occurs, which means it is lifelike.

CSS Animation Performance Tips

The following are some of the tips on how to easily and effectively use CSS animations and keyframes:

1. Only animate easy things: Try to animate opacity (fading) and transform (moving, scaling, rotating). These are fast for the browser.
2. Don’t animate size or position: Changing things like width, height, top, or left can slow down your website.
3. Don’t animate too many things at once: If lots of things move at the same time, your site may get laggy, especially on phones.
4. Use a special hint (will-change) only when needed: It can help, but using it too much can hurt performance.
5. Use CSS animations instead of JavaScript when you can: They’re faster and smoother most of the time.
6. Short animations: Animations that last very short (such as 0.2 to 0.3 seconds) appear quicker and responsive.
7. Test on slow devices as well: On your computer, everything may look smooth, but it does not mean slow phones will be smooth as well.
8. Let the browser do its job: Don’t make too many changes at once. The browser needs time to draw everything smoothly.

CSS vs JS Animations

A very simple comparison of CSS animations vs JavaScript animations is as follows:

Conclusion

CSS keyframes help you make things move or change on a webpage. You can use them to make things fade in, slide, bounce, or change colors. They’re easy to learn and fun to use. With practice, you can make your website look more interesting and lively using animations.

You can also check CSS Interview Questions and our Web Development course to learn more about CSS3.

Keyframes in CSS – FAQs