La propriété CSS animation permet d’animer un élément, sans que l’utilisateur n’interagisse avec.

Fonctionnement

On définit tout d’abord des keyframes, qui indiquent quels sont les étapes de l’animation:

@keyframes changeWidth {
	from {
		width: 100px;
	}

	to {
		width: 400px;
	}
}

On applique ensuite ces étapes à un élément avec la propriété animation-name et on spécifie une durée avec la propriété animation-duration:

.box {
	animation-name: changeWidth;
	animation-duration: 2s;
}

https://codepen.io/nbuntsch/pen/Jjvvqdv

Options

Nombre d’itérations

La propriété animation-iteration-count permet de définir le nombre de répétitions de l’animation. Par exemple.

.box {
	animation-name: changeWidth;
	animation-duration: 2s;
	animation-iteration-count: 3;
}

Il est possible de répéter l’animation à l’infini avec

animation-iteration-count: infinite;

Accélération

La propriété animation-timing-function permet de définir l’accélération de l’animation:

.box {
	animation-name: changeWidth;
	animation-duration: 2s;
	animation-timing-function: ease-out;
}