CSS · Motion and transforms

@keyframes

Defines the intermediate steps of an animation.

cssRunnable example css course

Syntax

@keyframes name { … }

Example

Try it

.demo { animation: slide 1.2s ease-in-out infinite alternate; } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(24px); } }

Learn this in the course

Reference pages are the quick answer. The course explains the why, shows the full example and ends with a challenge.

Open the course

@keyframes

Example

More in this group

Learn this in the course