Bonjour à tous et bienvenue dans ce cours sur le front-end. Je suis Lao Zhao du front-end. Aujourd'hui, nous allons apprendre le concept et l'utilisation de l'animation et de la transition CSS.
Les animations et transitions CSS nous permettent d'ajouter des effets vivants et dynamiques à la page, d'améliorer l'expérience utilisateur de la page et font également partie intégrante de la conception Web moderne.
Tout d'abord, introduisons le concept de transitions CSS. La transition CSS (transition) fait référence à la définition d'un effet de transition lorsqu'une certaine propriété CSS change, de sorte que le changement ne soit pas si brusque, mais une transition en douceur vers un nouvel état. Les transitions CSS peuvent être appliquées à n'importe quelle propriété CSS qui passe d'une valeur à une autre, comme la couleur, la taille, la position, etc.
Par exemple, lorsque nous passons la souris sur un lien, la couleur de la police du lien change, nous pouvons utiliser des transitions CSS pour effectuer la transition de couleur en douceur vers le nouvel état.
CSS
a { color: blue; transition: color 0.5s ease; }
a:hover { color: red; }Dans le code ci-dessus, nous définissons la couleur initiale du lien sur bleu et définissons un effet de transition pour le changement de couleur. Lorsque nous passons la souris sur le lien, la couleur de la police du lien passe en douceur du bleu au rouge et le processus dure 0,5 seconde.
En plus des transitions CSS, nous pouvons également utiliser des animations CSS (animation) pour obtenir des effets dynamiques plus complexes. L'animation CSS est composée de plusieurs images clés (images clés), chaque image clé définit un état dans l'animation, et CSS calculera automatiquement l'état intermédiaire pour obtenir des effets dynamiques.
CSS
@keyframes myanimation {
0% {
transform: scale(1);
}
50% {
transfo