The animation-timing-function defines the acceleration of an animation. By default, it uses ease, which means it starts slow, goes fast, then ends slow.

System Check

Which timing function represents a constant speed?

easelinearease-instep-start

Community Holo-Net

Share Custom Curves

Created a unique cubic-bezier? Share your values and usage examples.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Animation Timing Function

Pascual Vila

Frontend Instructor.

The animation-timing-function property specifies the speed curve of an animation. It defines how the animation progresses through time, whether it flows steadily, accelerates, decelerates, or moves in discrete steps.

The Speed Curves

Most animations aren't linear. Real-world objects have weight and momentum; they accelerate when starting and decelerate when stopping. CSS provides several keywords to mimic this:

linear: Constant speed. Same start to end.
ease: (Default) Slow start, fast middle, slow end.
ease-in: Slow start, then accelerates.
ease-out: Starts fast, then decelerates.
ease-in-out: Slow start and slow end.

Steps Function

The steps() function is unique. Instead of a smooth transition, it jumps between states. For example, steps(4) will divide the animation into four distinct frames. This is commonly used for sprite animations or typewriter effects.

Cubic Bezier

For ultimate control, you can define your own curve using cubic-bezier(n,n,n,n). The four values define two control points on a curve from (0,0) to (1,1). This allows for custom "bouncing" effects where values go below 0 or above 1.

Animation Glossary

Linear: A timing function where the animation has the same speed from start to end.
Ease: The default timing function. Starts slowly, accelerates in the middle, and ends slowly.
Cubic-Bezier: A function allowing the definition of a custom speed curve using four numeric values (x1, y1, x2, y2).
Steps: A timing function that divides the animation into specific number of intervals or "jumps".

📖 INDEX

Timing Mastery

Concept 1: Speed Curves