How to Create Animation in CSS: Simple Steps and Examples

To create animation in CSS, use the @keyframes rule to define the animation steps and the animation property to apply it to an element. The @keyframes sets how the element changes over time, and animation controls duration, timing, and repetition.

Syntax

The @keyframes rule defines the animation by specifying styles at different points (called keyframes). The animation property applies the animation to an element and controls how it runs.

• @keyframes name: Defines the animation steps.
• animation-name: The name of the keyframes to use.
• animation-duration: How long the animation takes.
• animation-timing-function: Speed curve (e.g., linear, ease).
• animation-iteration-count: How many times to repeat.

css

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

.element {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

Example

This example shows a blue box moving from left to right repeatedly using CSS animation.

css

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

.box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  animation: moveRight 3s ease-in-out infinite;
}

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

Output

A blue square box in the center of the page moves smoothly to the right 150px and back continuously.

Common Pitfalls

Common mistakes when creating CSS animations include:

• Not defining @keyframes before using the animation name.
• Forgetting to set animation-duration, so the animation does not run.
• Using incorrect property names or typos in animation properties.
• Expecting animation without specifying keyframe changes.
• Not considering browser prefixes (mostly legacy, but sometimes needed).

Always check spelling and include duration for the animation to work.

css

/* Wrong: No duration set, animation won't run */
.element {
  animation-name: slide;
}

/* Right: Duration added */
.element {
  animation-name: slide;
  animation-duration: 2s;
}

Quick Reference

Property	Description	Example Value
animation-name	Name of the @keyframes animation	"slide"
animation-duration	How long the animation lasts	2s, 500ms
animation-timing-function	Speed curve of animation	ease, linear, ease-in-out
animation-delay	Wait time before animation starts	1s, 0ms
animation-iteration-count	Number of times to repeat	infinite, 3
animation-direction	Direction of animation cycle	normal, reverse, alternate
animation-fill-mode	Styles applied before/after animation	forwards, backwards, none

Key Takeaways

Use @keyframes to define animation steps and animation properties to control playback.

Always set animation-duration; without it, animation won't run.

Use animation-iteration-count to repeat animations smoothly.

Check spelling and property names carefully to avoid silent failures.

Test animations in the browser to see the visual effect clearly.