---
id: 6140d94b5fab7f1d73c9bedb
title: Step 16
challengeType: 0
dashedName: step-16
---
# --description--
La regola `@keyframes` è usata per definire il flusso di un'animazione CSS. All'interno della regola `@keyframes`, puoi creare selettori per punti specifici nella sequenza di animazione, come `0%` o `25%`, oppure puoi usare `from` e `to` per definire l'inizio e la fine della sequenza.
Le regole `@keyframes` richiedono che venga assegnato loro un nome, da utilizzare come referenza in altre regole. Ad esempio, la regola `@keyframes freeCodeCamp { }` è chiamata `freeCodeCamp`.
È ora di iniziare ad animare. Crea una regola `@keyframes` chiamata `wheel`.
# --hints--
Dovresti avere una regola `@keyframes`.
```js
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 1);
```
La tua nuova regola `@keyframes` dovrebbe avere un nome di `wheel`.
```js
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'wheel');
```
# --seed--
## --seed-contents--
```html