animation CSS – transition transform scale

Passez la souris sur le bouton :

Document
transition transform scale

Voir le code pen

Les 5 éléments nécessaires pour créer une transition sont :

  • une propriété CSS à modifier,
  • une valeur initiale pour votre propriété CSS,
  • une valeur finale pour cette même propriété,
  • une durée,
  • une pseudo-classe pour déclencher l’animation.

On applique la valeur initiale à l’élément qu’on veut modifier, et la valeur finale dans la pseudo-classe qui déclenche la transition, ici :hover

.btn {
background: #2B4570;
color: #fbcf88;
font-size: 1.5rem;
cursor: pointer;
padding: 0.8rem 1.5rem;
border-radius: 7rem;
transform: scale(1);
transition: transform 250ms;
}
.btn:hover {
transform: scale(1.15);
}