Composer et régler les effets d’une animation

Une animation peut combiner plusieurs effets : par exemple, déplacer une carte vers le haut tout en la faisant apparaître. Les effets appartiennent à la même animation et partagent son déclencheur, mais ils peuvent avoir des réglages différents.

Les commandes présentées sont celles du mode Expert, utilisables sans code.

Avant de tester le mouvement : dans le menu Écran, utilisez un seul cadre et activez Activer les animations. Cette option concerne le rendu dans l’éditeur. En affichage de plusieurs écrans côte à côte, les animations sont désactivées.

1. Ouvrir les effets

Sélectionnez l’élément, puis ouvrez sa ligne dans Animations. Sous les déclencheurs, la rangée Effets contient un onglet pour chaque propriété animée.

Cliquez sur un onglet pour modifier cet effet. Le panneau Propriété indique ce qui change : opacité, position horizontale ou verticale, échelle, rotation, flou, découpe ou inclinaison.

2. Ajouter une propriété

Cliquez sur + dans la rangée Effets. Le nouvel effet commence avec l’opacité. Choisissez ensuite la propriété souhaitée, par exemple Rotate pour une rotation.

Changer de propriété initialise ses valeurs. Vérifiez donc les champs Début et Fin après ce choix. Ces valeurs décrivent le mouvement ; elles ne sont pas un champ de classes CSS.

3. Régler le début et la fin

Cliquez sur une valeur pour saisir un nombre, puis validez avec Entrée. Les unités dépendent de la propriété : un déplacement peut être exprimé en pixels, une rotation en degrés, tandis qu’une échelle de 1 correspond à la taille normale.

Dans l’exemple, la rotation se termine à 12°. Une valeur modérée rend le résultat facile à comprendre. Si le mouvement paraît excessif, réduisez d’abord cette différence entre le début et la fin.

4. Ajuster la durée et le délai

Pour une apparition ou une boucle, les commandes Durée et Délai sont affichées sous les valeurs. La durée indique combien de temps dure un passage. Le délai fait attendre cet effet avant son démarrage. 1 000 ms correspondent à une seconde.

L’exemple utilise une durée de 800 ms et un délai de 150 ms pour la rotation. Les autres effets gardent leurs propres réglages : modifier cet onglet ne synchronise pas automatiquement toute l’animation.

La courbe d’évolution détermine si le mouvement garde une vitesse régulière, accélère ou ralentit. Choisissez une courbe simple et utilisez Lecture pour juger le résultat.

Avec un déclenchement au défilement, la progression suit une plage de défilement plutôt qu’un temps fixe. Pour le survol ou la pression, les réglages de transition sont proposés à la place.

5. Dupliquer ou supprimer un effet

Survolez l’onglet sélectionné pour afficher ses petites commandes. Dupliquer ajoute une copie ; Supprimer retire cet effet.

La démonstration ajoute une rotation, la duplique, puis supprime la copie. Vérifiez le nombre d’effets pour éviter deux réglages contradictoires sur une même propriété. Le dernier effet ne se supprime pas depuis cette commande : pour retirer toute l’animation, utilisez la suppression de sa ligne.

6. Vérifier l’ensemble

Cliquez sur Lecture, puis regardez l’élément et ses voisins. Vérifiez que le texte reste lisible, qu’aucune partie importante n’est masquée et que l’interaction reste facile à utiliser. Enregistrez, puis testez l’aperçu visiteur.

Pour aller plus loin

Adoucir le survol et appliquer une transition commune ou régler les répétitions.