# Animation Direction

## `direction-*`

<table>
<thead>
<tr>
<th>Class</th>
<th>Styles</th>
</tr>
</thead>
<tbody>
<tr>
<td>

`direction-normal`

</td>
<td>

```css
animation-direction: normal;
```

</td>
</tr>
<tr>
<td>

`direction-reverse`

</td>
<td>

```css
animation-direction: reverse;
```

</td>
</tr>
<tr>
<td>

`direction-alternate`

</td>
<td>

```css
animation-direction: alternate;
```

</td>
</tr>
<tr>
<td>

`direction-alternate-reverse`

</td>
<td>

```css
animation-direction: alternate-reverse;
```

</td>
</tr>
<tr>
<td>

`direction-initial`

</td>
<td>

```css
animation-direction: initial;
```

</td>
</tr>
<tr>
<td>

`direction-(<custom-property>)`

</td>
<td>

```css
animation-direction: var(<custom-property>);
```

</td>
</tr>
<tr>
<td>

`direction-[<value>]`

</td>
<td>

```css
animation-direction: <value>;
```

</td>
</tr>
</tbody>
</table>

<!-- Links -->

[MDN_Direction]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction