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.

<!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.

Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href si nécessaire afin qu’elle corresponde à l’emplacement et au nom du fichier CSS.

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

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

body {
   background-color: #eee;
}

Mise en place des éléments à animer

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

<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 {
  width: 200px;
  height: 200px;
  border: 1px solid #f00;
}

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

<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

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

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

.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.

<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.

.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.

.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

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

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

de faire alterner le mouvement ;
de modifier le rythme de l’animation.

animation-direction
animation-timing-function

.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.

<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

.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.

.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é.

.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.

.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.

<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>

.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.

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

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.