Comment créer un effet d'animation avec CSS et HTML?

Voici un exemple très simple d’animation utilisant CSS et HTML :

1. Étape 1: Créer un HTML
```

Bonjour le monde!

```
1. Étape 2: Créer une animation en CSS
``` .animation { width: 200px; height: 50px; color: white; background-color: lightblue; position: relative; animation-name: example; animation-duration: 5s; }

@keyframes example { 0% {background-color: lightblue; left:0px; top:0px;} 25% {background-color: darkblue; left:200px; top:0px;} 50% {background-color: lightblue; left:200px; top:200px;} 75% {background-color: darkblue; left:0px; top:200px;} 100% {background-color: lightblue; left:0px; top:0px;} } ```

La première partie de la CSS définit le temps et le nom de l’animation. Dans cette animation, nous l’appelons “example” et spécifions une durée d’animation de 5 secondes.

Ensuite, la règle `@keyframes` est utilisée pour contrôler l’animation. La règle `0%` définit le point de début de l’animation, `25%, 50%, 75%` définissent les différents points de transition de l’animation et `100%` définit le point final de l’animation. De gauche à droite, de haut en bas, la couleur de fond de la div change de lightblue à darkblue.

N’oubliez pas de tester cela dans votre navigateur pour voir le résultat en direct!