21 Transitions & Animations

# Transitions

Avec la pseudo-classe :hover vous pouvez décrire ce qui devrait arriver à un élément HTML lorsque vous le survolez. Le bouton suivant permet de changer la couleur de fond.

    <a class="button" href="https://duckduckgo.com">
      Je suis un bouton
    </a>

    .button {
      background-color: royalblue;
      color: white;
      border-radius: 0.5rem;
    }
    
    .button:hover {
      background-color: orange;
    }

⚒️ tester ce code

Vous pouvez voir que le changement est instantané et qu'il n'y a pas de délai entre le changement de la couleur de fond. Avec la propriété "transition", vous pouvez animer entre les propriétés. Cela se fait en définissant ce qui suit sur la classe originale ".button" :

    .button {
        background-color: royalblue;
        color: white;
        border-radius: 0.5rem;
        transition-property: background-color;
        transition-duration: 1s;
        transition-timing-function: linear;
    }
    
    .button:hover {
        background-color: orange;
    }

⚒️ tester ce code

Vous pouvez également animer plusieurs propriétés indépendamment. Vous devez veiller à séparer les valeurs par une virgule et à respecter le bon ordre. Si vous voulez animer toutes les propriétés, vous pouvez écrire transition-property: all.

.button {
background-color: royalblue;
color: white;
border-radius: 0.5rem;
transition-property: background-color, color;
transition-duration: 1s, 0.5s;
transition-timing-function: linear;
}

.button:hover {
background-color: orange;
color: black;
}

# Animations

Les animations ne nécessitent aucune interaction, comme un ".hover" avec le curseur, par rapport aux transitions. Avec les animations, vous décrivez un ensemble de propriétés qui doivent être animées vers un autre ensemble de propriétés. Vous pouvez considérer cela comme une transition. Chaque étape est appelée "keyframe" en CSS. Dans votre sélecteur, vous faites alors référence au nom de l'animation de vos "images-clés" et vous indiquez à ce sélecteur comment jouer l'animation.

Dans l'exemple suivant, nous voulons qu'un carré soit pulsé et que la couleur passe de "bleu royal" à "orange".

    /* On définit d'abord l'animation... */

@keyframes carrePulse {
0% { /* Début */
transform: scale(0.7); /* 70% de la taille d'origine */
background-color: royalblue;
}
100% { /* Fin */
transform: scale(1);
background-color: orange;
}
}
    
    /* ...alors l'animation est assignée. */

.square {
height: 5rem;
width: 5rem;
animation-name: carrePulse;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}

    <div class="square"></div>

La propriété "animation-timing-function: ease-in-out;" donne l'impression que le carré "respire", car l'animation joue à des vitesses différentes. Une animation toujours stable pourrait être obtenue avec la valeur "linéaire". Grâce à ces fonctions de chronométrage, vous pouvez donner aux animations un aspect réaliste. Dans les liens ci-dessous, vous trouverez des fiches de référence à partir desquelles vous pouvez copier des valeurs pour vous familiariser avec les fonctions de temps.

Pour faire jouer l'animation à l'infini, il faut définir "animation-iteration-count: infinite;". Si vous voulez que l'animation ne soit jouée que 3 fois, alors écrivez animation-iteration-count: 3;.

Avec animation-direction: alternate, vous définissez que l'état final (100%) s'anime à nouveau pour revenir à l'état initial (0%). Sinon, l'animation reviendrait à l'état initial après avoir atteint l'état final. Dans notre exemple, le carré deviendrait soudainement plus petit et changerait de couleur.

🔗 Liens

• Fiche de référence (easings.net)

• Animista - Exemples avec aperçu et code

Relever les défis

#20 CSS Animations (Ajouter une animation avec CSS qui ne s'arrête jamais et fonctionne indépendamment de l'interaction de l'utilisateur)