Créer une transition ou une animation

Un bouton peut changer instantanément de couleur au survol ou évoluer progressivement vers cette couleur. C’est le rôle d’une transition : adoucir un changement entre deux états.

Une animation décrit un mouvement, éventuellement composé de plusieurs effets, avec son propre déclenchement. Elle peut par exemple faire apparaître une carte à l’écran ou la déplacer au défilement.

Ces deux commandes sont visuelles en mode Expert. Vous n’avez pas besoin de remplir le champ Classes CSS.

1. Préparer un changement de style

Sélectionnez l’élément dans la page ou dans Calques. Choisissez d’abord une valeur normale, puis une valeur dans un autre état.

L’exemple utilise une opacité de base de 100 %, puis 50 % au survol. Sans autre réglage, le changement est immédiat. La transition ne crée pas cet état : il faut d’abord définir ce qui change.

Pour ajouter la règle de survol, survolez la ligne du réglage, ouvrez sa commande d’ajout de condition et choisissez Hover. Définissez la valeur sur la nouvelle ligne.

2. Choisir la propriété à faire évoluer

Dans le groupe Transitions, cliquez sur +, puis ajoutez Transition. Choisissez la famille de propriétés concernée.

Dans l’exemple, choisissez Opacity, puisque seule l’opacité change. Une sélection précise évite d’animer involontairement une autre propriété modifiée plus tard.

Placez la transition sur la valeur de base de l’élément : elle pourra ainsi agir à l’entrée dans l’état et au retour à l’état normal.

3. Régler la durée et le délai

Toujours dans Transitions, ajoutez Durée. Choisissez par exemple 500 ms, soit une demi-seconde pour rejoindre la nouvelle valeur.

Ajoutez Délai si vous souhaitez attendre avant de commencer. L’exemple utilise 150 ms. La durée et le délai s’additionnent dans le temps, mais n’ont pas le même rôle : attendre, puis évoluer.

Une attente perceptible peut gêner un bouton. Commencez généralement avec peu ou pas de délai, et allongez seulement si le résultat le justifie.

4. Tester l’aller et le retour

Survolez l’élément, attendez la fin du mouvement, puis éloignez la souris. Vérifiez les deux directions. L’état normal doit revenir avec le rythme prévu.

Testez ensuite dans l’aperçu visiteur. Sur un écran tactile, le survol n’est pas une interaction suffisamment fiable pour dévoiler une information essentielle. Conservez un contenu utilisable sans ce geste.

Si aucun mouvement n’apparaît, vérifiez la présence de deux valeurs différentes, le type de propriété choisi et l’absence d’un autre réglage qui remplace celui-ci.

5. Quand utiliser une animation

Pour une apparition à l’écran, un mouvement lié au défilement ou plusieurs effets coordonnés, utilisez le groupe Animations. Ajoutez un préréglage, puis réglez son déclenchement et ses effets.

Pour voir les animations dans l’éditeur, choisissez un seul cadre et activez Activer les animations dans Écran. Les transitions de style et les animations disposent de réglages distincts : la durée du groupe Transitions ne règle pas automatiquement chaque effet d’une animation.

Choisir une animation ou appliquer une transition aux effets d’une animation.

6. Garder une page confortable

Le mouvement doit aider à comprendre la page. Évitez les boucles permanentes autour des textes de lecture et les effets qui retardent l’accès à un formulaire.

Une transition courte suffit souvent pour un retour visuel. Pour une information essentielle, prévoyez un état lisible sans animation et vérifiez aussi le site avec la préférence de réduction des mouvements du système. Ne supposez pas qu’un effet particulier s’adapte automatiquement à cette préférence sans l’avoir testé.

Enregistrez quand l’entrée, le retour et le rendu mobile vous conviennent.