Comment faire un trait animé entre 2 éléments en CSS ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-02-09 16:01:09

Thèmes : css - ligne

Question

Bonjour, j'aimerais savoir comment faire une ligne (pas horizontal) entre deux textes/image pour ensuite l'animer avec scale(). Quelqu'un aurait-il une solution ?

Réponse

Bonjour, si vous voulez faire une ligne verticale vous pouvez tout simplement utiliser une balise <div> de la manière suivante :

<style>
.verticale {
  border-left: 2px solid black;
  height: 250px;
}
</style>
<div class="verticale"></div>

Si vous voulez faire une ligne du type diagonale, vous pouvez soit utiliser la fonction linear-gradient comme expliqué via cette autre question ; ou bien la propriété CSS transform ; et pour l'animation, soit la fonction scale() ou bien la propriété animation :

<style>
.diagonale {
  width: 0px;
  height: 0px;
  border-bottom: 1px solid black;
  -webkit-transform: translateY(0px) translateX(0px) rotate(45deg);
  animation: agrandir 3s linear forwards;
}

@keyframes agrandir {
  to {
    width: 500px;
    height: 250px;
    -webkit-transform: translateY(-40px) translateX(10px) rotate(45deg);
    }
}
</style>
<div class="diagonale"></div>