Web4College

CSS animation-timing-function property

src

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;
Try it

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;
Try it

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;
Try it

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;
Try it

Applicable to

It applies to all elements