# @keyframes at-rule

The `@keyframes` at-rule sets keyframes (waypoints) for an animation. A keyframe represents various properties of our CSS element, such as position, size, color, etc., that are applied to the element at a specified time.

## Syntax

`@keyframes animation name { keyframes }`

## Example

Setting keyframes:

`<div id="elem"></div>` `@keyframes anim { from { margin-left: 0px; } to { margin-left: 400px; } } #elem { animation: anim 3s infinite; border: 1px solid black; width: 50px; height: 50px; }`

:

## Example

Now let's move our square using animation from top to bottom:

`<div id="elem"></div>` `@keyframes anim { from { margin-top: 0%; } to { margin-top: 10%; } } #elem { animation: anim 2s infinite; border: 1px solid black; width: 50px; height: 50px; }`

:

## Example

Let's increase the width of our shape using animation, setting key points in percentages:

`<div id="elem"></div>` `@keyframes anim { from { width: 10%; } to { width: 40%; } } #elem { animation: anim 2s infinite; border: 1px solid black; width: 50px; height: 50px; }`

:

## Example

Now let's change a transparency of our shape:

`<div id="elem"></div>` `@keyframes anim { from { background-color: #467CBC; } to { background-color: #C2DDFD; } } #elem { animation: anim 2s infinite; border: 1px solid black; width: 50px; height: 50px; }`

:

## See also

- all properties for CSS animation: `animation-name`, `animation-duration`, `animation-delay`, `animation-timing-function`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, `animation-play-state`, `keyframes`
- `transition` - smooth transitions (an animation when hovering over an element)

← →
↑
en ru