CSS animation-timing-function property

Description

CSS animation-timing-function defines how the animation progress between different time intervals of a keyframe.

Syntax

animation-delay : ease | ease-in | ease-out | ease-in-out

Property values

easeDefault

The speed of the animation is constant over its duration. It represents normal behavior over the animation-duration.

animation-timing-function: ease;

ease-in

The speed is slow at the start of animation i.e. It represents smooth behavior at the start only.

animation-timing-function: ease-in;

ease-out

The speed is fast at the end of animation i.e. The animation is smooth at the end.

animation-timing-function: ease-out;

ease-in-out

The speed of the animation is slow at the start and end of animation-duration as compared to intermediate time. It represents smooth behavior at the start and end of the animation.

animation-timing-function: ease-in-out;

Applicable to

It applies to all elements

#CSS digger
Was this article helpful?

 
×

Ctrl+D