CSS animation-timing-function Property

CSS animation-timing-function Property

The animation-timing-function property in CSS controls the speed curve of an animation. It defines how an animation accelerates and decelerates during its duration.

1. Syntax

selector {
  animation-timing-function: value;
}

2. Accepted Values

Value	Description
ease (default)	Starts slow, speeds up in the middle, and then slows down at the end.
linear	Constant speed from start to finish.
ease-in	Starts slow and then speeds up.
ease-out	Starts fast and then slows down.
ease-in-out	Starts and ends slowly, with a fast middle.
steps(n, start/end)	Jumps in n steps instead of smooth animation.
cubic-bezier(x1, y1, x2, y2)	Custom speed curve using a Bezier function.

3. Example – Using ease (Default)

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

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

✅ The movement starts slow, speeds up, and then slows down.

4. Example – Using linear (Constant Speed)

.box {
  animation: move 3s linear infinite;
}

✅ The movement speed stays constant throughout.

5. Example – Custom Bezier Curve (cubic-bezier)

.box {
  animation: move 3s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

✅ Allows precise control over the animation’s acceleration.

6. Best Practices

✔ Use ease-in-out for smooth, natural motion.
✔ Use linear for continuous animations (like a loading spinner).
✔ Use cubic-bezier for fine-tuned motion effects.