Transitions, animations & transformations
Donner du mouvement et de la vie à tes éléments.
Imagine : tu lances un sort. Jusqu'à présent, quand tu survolais un bouton, le changement était instantané. C'est un peu brutal.
Les transitions et animations, c'est la cinématique de tes sorts. Elles permettent de rendre les changements fluides et naturels.
9.1 La fluidité du mouvement : transition
La propriété transition est la plus simple. Elle permet de rendre le passage d'un état à un autre fluide.
Sans transition
Avec transition
.carte-fluide {
transition: all 0.3s ease-in-out;
}
.carte-fluide:hover {
transform: scale(1.1);
background: #26c6da;
}9.2 Changer de forme : transform
La propriété transform permet de modifier l'apparence d'un élément sans affecter le flux.
📈
🔄
➡️
#trans-scale:hover { transform: scale(1.5); }
#trans-rotate:hover { transform: rotate(360deg); }
#trans-translate:hover { transform: translateX(20px); }9.3 La cinématique complète : @keyframes
Si la transition est un simple fondu, les @keyframes sont un véritable film avec des étapes précises.
@keyframes pulsation {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.orbe-pulsant {
animation: pulsation 2s infinite;
}