Choisir, prévisualiser et remplacer une animation

Une animation aide à remarquer un élément ou à comprendre une interaction. Commencez par un mouvement simple, puis vérifiez que la page reste agréable à lire.

Ce guide utilise les commandes visuelles du mode Expert. Aucun code n’est nécessaire.

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. Choisir l’élément à animer

Sélectionnez l’élément dans la page ou dans Calques. Pour un premier essai, prenez un petit élément sans animation existante : une carte, un bouton ou un paragraphe.

Dans le panneau de styles, repérez Animations. Le mouvement s’applique à l’élément sélectionné. Animer un conteneur peut donc déplacer visuellement tout son contenu.

2. Ajouter un préréglage

Cliquez sur + dans le groupe Animations, puis survolez l’option Animations pour ouvrir ses catégories. Survolez une catégorie, puis choisissez un préréglage.

Les catégories distinguent notamment le texte, l’apparition, le survol, la pression, les boucles et les effets liés au défilement. Par exemple, Fade Up combine une remontée et une apparition progressive. Fade In fait seulement apparaître l’élément.

Une nouvelle ligne est ajoutée dans le panneau. Son nom résume les propriétés animées. Le petit nombre d’effets indique combien de réglages composent ce mouvement.

3. Regarder le résultat

Cliquez sur la ligne de l’animation pour ouvrir ses réglages, puis sur Lecture. Regardez l’élément dans le rendu réel, pas seulement les commandes du panneau.

Pour un effet au survol ou à la pression, testez aussi l’interaction dans l’aperçu visiteur. Pour un mouvement au défilement, faites défiler la page : le bouton de lecture ne remplace pas ce test.

4. Remplacer le mouvement

Dans l’éditeur de l’animation, survolez l’icône Remplacer par un préréglage à droite des effets. Choisissez le nouveau mouvement dans la liste.

Ce remplacement modifie l’animation ouverte. Il ne revient pas à cliquer sur + pour en ajouter une deuxième. Vérifiez les propriétés et le nombre d’effets après le changement : vos anciens réglages d’effets peuvent être remplacés par ceux du nouveau préréglage.

Après un remplacement, le formulaire peut conserver les anciens champs alors que le nom de l’animation a changé. Fermez puis rouvrez la ligne de l’animation avant de modifier une valeur. Ce défaut a été signalé ; la démonstration montre aussi cette actualisation.

Dans la démonstration, Fade Up est remplacé par Fade In : il ne reste que l’opacité. Cliquez à nouveau sur Lecture pour comparer.

5. Retirer ou annuler

Fermez la fenêtre de réglage, puis survolez la ligne de l’animation. Cliquez sur sa commande de suppression pour retirer cette animation. Le bouton Annuler de l’en-tête permet de revenir sur cette action.

Quand le résultat vous convient, enregistrez la page. Vérifiez ensuite l’aperçu sur ordinateur et sur mobile : un mouvement adapté à une grande carte peut être gênant sur un petit écran.

Si une animation existante affiche des lignes vides

Certains éléments contenant un ancien préréglage court peuvent afficher plusieurs lignes Animation, sans effet à modifier. Ce comportement a été constaté et signalé. Évitez d’ajouter des animations à cet élément pour essayer de réparer ces lignes ; conservez son état et utilisez un élément sans animation pour votre essai.

Pour aller plus loin

Composer les effets d’une animation ou choisir son déclenchement.