Animations en CSS pas à pas CSS41

Cette exercice pas à pas est destiné à vous guider pour la création d’une première animation en CSS.

Consignes de l’exercice

Préparation des fichiers de l’exercice

HTML : Construisez une page HTML de base.

Afficher la solution

Solution :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Titre de la page</title>
	</head>
	<body>

	</body>
</html>

HTML : Créez une feuille de style et liez-la à la page HTML.

Afficher la solution

Solution :

Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href si nécessaire.

<link  rel="stylesheet" type="text/css" href="style.css">

CSS : Modifiez la couleur d’arrière-plan de la page web.

Afficher la solution CSS

Solution CSS :

body {
   background-color: #eee;
}

Mise en place des éléments à animer

HTML : Créez un élément <div> avec la classe container.

Afficher la solution HTML

Solution HTML :

<div class="container">
</div>

CSS : Dimensionnez l’élément container pour en faire un carré de 200 pixels de côté et ajoutez-lui une bordure afin de pouvoir le visualiser.

Container en forme de carré
Container en forme de carré
Afficher la solution CSS

Solution CSS :

.container {
  width: 200px;
  height: 200px;
  border: 1px solid #f00;
}

HTML : Ajoutez dans l’élément container un second élément <div> avec la classe item.

Afficher la solution HTML

Solution HTML :

<div class="container">
  <div class="item"></div>
</div>

CSS : En utilisant la classe circle, transformez l’élément en carré de 40 pixels de côté et ajoutez-lui une couleur d’arrière-plan.

Création du carré à l'intérieur
Création du carré à l’intérieur
Afficher la solution CSS

Solution CSS :

.circle {
  width: 40px;
  height: 40px;
  background-color: #00897B;
}

CSS : Transformez l’élément intérieur en cercle en modifiant la classe circle.

Élément intérieur en cercle
Élément intérieur en cercle
Afficher un indice

Indice :

Recherche Google, Créer un cercle en CSS
Afficher la solution CSS

Solution CSS :

.circle {
  width: 40px;
  height: 40px;
  background-color: #00897B;
  border-radius: 50%;
}

HTML : Ajoutez une seconde classe (en plus de la première) au cercle sous le nom anim-1.

Nous pourrions travailler uniquement avec la classe circle, mais cette seconde classe va nous permettre de distinguer les propriétés CSS permettant de créer le cercle, des propriétés CSS permettant d’animer l’élément en question. Ainsi, nous pourrons facilement avoir plusieurs cercles avec des animations différentes.

Afficher la solution HTML

Solution HTML :

<div class="container">
  <div class="circle anim-1"></div>
</div>

HTML : En utilisant la classe anim-1 et la propriété CSS margin-left, centrez horizontalement le cercle dans le conteneur principal.

Centrage du cercle
Centrage du cercle
Afficher la solution CSS

Solution CSS :

.anim-1 {
  margin-left: 80px;
}

Création de la première animation

CSS : Ajoutez, sur l’élément anim-1, une animation qui s’appelle animation-1, qui dure 2 secondes et qui se répète à l’infini.

Les images clés n’étant pas définies, il ne se passe rien à l’écran pour le moment.

Afficher la solution CSS

Solution CSS :

.anim-1 {
  margin-left: 80px;
  animation-name: animation-1;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

CSS : Créez un jeu d’images clés de 0% à 100%, et faites en sorte que le cercle se déplace entre le haut et le bas du conteneur.

Comme pour le centrage du cercle, vous pouvez gérer le déplacement en utilisant des marges.

Début de l'animation
Début de l’animation
Afficher la solution CSS

Solution CSS :

@keyframes animation-1 {
  0% {
  }
  100% {
    margin-top: 160px;
  }
}

CSS : Ajoutez les propriétés CSS à l’élément animé afin :

  1. de faire alterner le mouvement ;
  2. de modifier le rythme de l’animation.
Mouvement alternatif
Mouvement alternatif
Afficher les propriétés CSS

Propriétés CSS :

animation-direction
animation-timing-function

Afficher la solution CSS

Solution CSS :

.anim-1 {
  margin-left: 80px;
  animation-name: animation-1;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

Deuxième cercle

HTML : Dupliquez le cercle et renommez la classe anim-1 en anim-2 sur la copie.

Afficher la solution HTML

Solution HTML :

<div class="container">
  <div class="circle anim-1"></div>
  <div class="circle anim-2"></div>
</div>

CSS : Pour rendre les deux cercles indépendants, il est nécessaire de les positionner en absolu et de positionner le conteneur principal en relatif. Effectuez donc les modifications nécessaires.


Si vous ne connaissez pas le principe du positionnement relatif et absolu, ce n’est pas grave pour cet exercice, vous pouvez alors regarder la solution à cette question. Notez que nous pourrions très bien pu utiliser des options de positionnement absolu à la place des marges pour effectuer les mêmes animations, cela aurait d’ailleurs été préférable.

Positionnement en absolu des deux cercles
Positionnement en absolu des deux cercles
Afficher la solution CSS

Solution CSS :

.container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #f00;
}
.circle {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #00897b;
  border-radius: 50%;
}

CSS : En suivant le même principe que pour le premier cercle, animez le second pour que celui-ci se déplace en diagonale.

Afficher la solution CSS

Solution CSS :

.anim-2 {
  margin-top: 160px;
  animation-name: animation-2;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
@keyframes animation-2 {
  0% {
  }
  100% {
    margin-top: 0px;
    margin-left: 160px;
  }
}

Troisième cercle

HTML : Dupliquez le cercle et appliquez-lui la classe anim-3.

CSS : Animez le troisième cercle pour que celui-ci suive une trajectoire en forme de Z.

Vous allez devoir utiliser plus d’images clés que pour les animations précédentes. Chaque changement de direction sera géré par une image clé.

Animation du troisième cercle
Animation du troisième cercle
Afficher la solution CSS

Solution CSS :

.anim-3 {
  animation-name: animation-3;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
@keyframes animation-3 {
  0% {
  }
  33% {
    margin-top: 0px;
    margin-left: 160px;
  }
  66% {
    margin-top: 160px;
    margin-left: 0px;
  }
  100% {
    margin-top: 160px;
    margin-left: 160px;
  }
}

Peaufinage de l’animation

Cette animation se ressemble à rien, vous ne risquez donc pas de la réutiliser, mais nous allons quand même effectuer quelques manipulations pour essayer de l’améliorer un petit peu.

CSS : Supprimez la bordure du conteneur qui n’était là que pour pouvoir visualiser les déplacements des enfants.

Afficher la solution CSS

Solution CSS :

.container {
  width: 200px;
  height: 200px;

  position: relative;
}

CSS : Simplifiez les classes anim-1, anim-2 et anim-3 en regroupant les éléments communs.

Vous pouvez pour cela utiliser la classe circle qui est commune ou plutôt créer une nouvelle classe anim.

Afficher la solution HTML

Solution HTML :

<div class="container">
  <div class="circle anim anim-1"></div>
  <div class="circle anim anim-2"></div>
  <div class="circle anim anim-3"></div>
</div>
Afficher la solution CSS

Solution CSS :

.anim {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
.anim-1 {
  margin-left: 80px;
  animation-name: animation-1;
}
@keyframes animation-1 {
  0% {
  }
  100% {
    margin-top: 160px;
  }
}
.anim-2 {
  margin-top: 160px;
  animation-name: animation-2;
}
@keyframes animation-2 {
  0% {
  }
  100% {
    margin-top: 0px;
    margin-left: 160px;
  }
}
.anim-3 {
  animation-name: animation-3;
}
@keyframes animation-3 {
  0% {
  }
  33% {
    margin-top: 0px;
    margin-left: 160px;
  }
  66% {
    margin-top: 160px;
    margin-left: 0px;
  }
  100% {
    margin-top: 160px;
    margin-left: 160px;
  }
}

CSS : Rendez cette animation encore plus splendide en variant les couleurs.

Animation avec couleurs
Animation avec couleurs
Afficher la solution CSS

Solution CSS :

body {
  background-color: #eee;
  padding: 3rem;
}
.container {
  width: 200px;
  height: 200px;
  aborder: 1px solid #f00;
  position: relative;
}
.circle {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #00897b;
  border-radius: 50%;
}
.anim {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
.anim-1 {
  margin-left: 80px;
  animation-name: animation-1;
}
@keyframes animation-1 {
  0% {
  }
  100% {
    margin-top: 160px;
    background-color: #C51162;
  }
}
.anim-2 {
  margin-top: 160px;
  animation-name: animation-2;
}
@keyframes animation-2 {
  0% {
    background-color: #F9A825;
  }
  100% {
    margin-top: 0px;
    margin-left: 160px;
    background-color: #42A5F5;
  }
}
.anim-3 {
  animation-name: animation-3;
}
@keyframes animation-3 {
  0% {
    background-color: #D500F9;
  }
  33% {
    margin-top: 0px;
    margin-left: 160px;
  }
  66% {
    margin-top: 160px;
    margin-left: 0px;
  }
  100% {
    margin-top: 160px;
    margin-left: 160px;
    background-color: #E6EE9C;
  }
}

Sauf mention contraire*, l'article Animations en CSS pas à pas [CSS41] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.