How to Create Infinite Animation in CSS Easily

To create an infinite animation in CSS, use the animation-iteration-count: infinite; property or add infinite to the shorthand animation property. This makes the animation repeat endlessly without stopping.

Syntax

The key to infinite animation is the animation-iteration-count property. Setting it to infinite tells the browser to repeat the animation forever.

You can use it alone or inside the shorthand animation property.

• animation-name: The name of the animation keyframes.
• animation-duration: How long one cycle lasts.
• animation-iteration-count: Number of times to repeat; use infinite for endless.

css

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.element {
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Output

A box moves horizontally 100px repeatedly without stopping.

Example

This example shows a blue square moving left to right continuously using infinite animation.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
}

@keyframes moveRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(150px); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: #007BFF;
  animation: moveRight 3s linear infinite;
}

Output

A blue square moves smoothly from left to right repeatedly in the center of the page.

Common Pitfalls

Some common mistakes when creating infinite animations include:

• Forgetting to set animation-iteration-count or infinite in shorthand, so animation runs only once.
• Using very short durations that make animation look too fast or jumpy.
• Not defining keyframes properly, causing no visible animation.

Always check your keyframes and animation properties carefully.

css

/* Wrong: animation runs once by default */
.element {
  animation-name: slide;
  animation-duration: 2s;
}

/* Right: add infinite to repeat forever */
.element {
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Output

Without infinite, animation runs once; with infinite, it repeats endlessly.

Quick Reference

Property	Description	Example Value
animation-name	Name of the keyframes animation	slide
animation-duration	Length of one animation cycle	3s
animation-iteration-count	How many times to repeat animation	infinite
animation-timing-function	Speed curve of animation	linear, ease-in-out
animation-delay	Wait time before animation starts	0s

Key Takeaways

Use animation-iteration-count: infinite to make animations repeat forever.

Include infinite in the shorthand animation property for concise code.

Define clear keyframes to see visible animation effects.

Choose animation duration carefully for smooth, natural motion.

Test animations in the browser to ensure they run as expected.