Transitions, animations & transformations
Donner du mouvement et de la vie à tes éléments.
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
CSScss
.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.
📈
🔄
➡️
CSScss
#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.
CSScss
@keyframes pulsation {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.orbe-pulsant {
animation: pulsation 2s infinite;
}