Keyframes in CSS: Syntax and Animation Examples

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

CSS Keyframes vs CSS Transitions

Given below, we have provided a difference table for CSS Keyframes vs Transitions for your reference:

Using Keyframes with Animation

You need two parts to create an animation in CSS.

• @keyframes – @keyframes in CSS are used to define what happens during the animation (the steps).
• animation properties – tell the element how to play the animation.

Given below are some CSS animation examples.

For example:

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

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, the CSS animation properties are explained below in tabular format:

Property	What It Does	Example
animation-name	The name of your @keyframes animation	animation-name: slide;
animation-duration	How long the animation runs	animation-duration: 2s;
animation-timing-function	Controls the speed curve of the animation	animation-timing-function: ease;
animation-delay	The delay before the animation begins	animation-delay: 1s;
animation-iteration-count	Number of times the animation repeats	animation-iteration-count: infinite;
animation-direction	Direction of animation (normal, reverse, alternate)	animation-direction: alternate;
animation-fill-mode	Styles to use before/after animation	animation-fill-mode: forwards;
animation-play-state	Determines whether the animation is running or paused	animation-play-state: paused;

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

Some CSS examples for beginners are given below for your reference:

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 keyframes in CSS.

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 the 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:

Feature	CSS Animations	JavaScript Animations
Ease of use	Easy to write with basic code	Needs more code and logic
Performance	Usually smoother and faster	Can be smooth, but depends on how it’s written
Control	Less flexible (can’t react to user input easily)	Very flexible (can respond to clicks, scrolls, etc.)
Timing functions	Built-in (ease, linear, etc.)	Customizable with math or libraries
Interactivity	Limited (triggers like hover or load)	Great for interactive effects
Browser handling	Runs on GPU, often very efficient	Runs on the main thread, may slow down if not optimized
Best for	Simple animations (fade, slide, scale)	Complex, dynamic animations

Conclusion

Learning keyframes in CSS makes it much easier to bring your web pages to life. With keyframes, you can control exactly how elements change over time, creating smooth and eye-catching animations. Whether it’s a small hover effect or a more complex movement, keyframes give you the power to make your site more engaging. Start experimenting with them, and you’ll see how even simple animations can make a big difference in how your website feels and looks.

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

Keyframes in CSS – FAQs