CSS animation property

CSS animation Property

The animation property is a shorthand that combines multiple animation-related properties into a single declaration. It allows you to create smooth and dynamic animations in CSS.

1. Syntax

selector {
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

2. Accepted Values

Property	Description	Example
name	Name of the @keyframes animation	slide
duration	How long the animation runs	2s, 500ms
timing-function	Controls the speed curve	ease, linear, ease-in-out
delay	Time before animation starts	0s, 1s, -2s
iteration-count	Number of times animation runs	1, infinite, 3
direction	Direction of animation playback	normal, reverse, alternate
fill-mode	Defines styles before/after animation	none, forwards, backwards
play-state	Controls animation state	running, paused

3. Example – Simple Animation

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: move 3s ease-in-out infinite;
}

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(300px); }
}

✅ The box moves right and resets continuously.

4. Example – Full Animation Shorthand

.box {
  animation: bounce 2s ease-in 1s infinite alternate forwards running;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-50px); }
}

✅ The box bounces up and down with a 1s delay.

5. Best Practices

✔ Use shorthand for cleaner code.
✔ Set forwards fill-mode to maintain the final state.
✔ Use infinite iteration for continuous animations.