HTML/CSS: Animation lors du hover

: introduit pseudo-classe

:: introduit pseudo-élément

(L’exemple ci-dessous se base sur le trait réalisé en CSS.)

Animation -> Elément passe d’un état à l’autre.

Il faut donc décrire les deux états des éléments, avec la condition d’activation (par ex: hover)

Ici: trait rouge passe de 100% a 10% en 0.5s lors du hover:

#section-form .line {
  position: relative;
  display: inline-flex;
}

#section-form .line::before {
  content: "";
  width: 100%;
  border-radius: 2px;
  border: 2px solid olivedrab;
  position: absolute;
  top: -20px;
  opacity: 0;
  transition: all 0.5s;
}
#section-form .line:hover::before {
  opacity: 100%;
  top: -12px;
  transition: all 0.5s;
}

#section-form .line::after {
  content: "";
  width: 100%;
  border-radius: 2px;
  border: 2px solid olivedrab;
  position: absolute;
  bottom: -20px;
  opacity: 00%;
  transition: all 0.5s;
}

#section-form .line:hover::after {
  opacity: 100%;
  bottom: -10px;
  transition: all 0.5s;
}

:hover -> ce qui se passe quand on hover par dessus l’élément ciblé.

transition: width -> timing du passage (de la largeur) de la situation précédente à celle en cours.

RESULTAT

Passe de là:

à là :