Animer un bloc

Cet article explique comment ajouter une animation à un bloc, choisir son effet, son déclencheur et son rythme puis enchaîner plusieurs animations. Vous saurez aussi importer vos propres animations et faire réagir un bloc à un autre.

Avant de commencer

• Les animations se règlent dans l’onglet Animations de la barre latérale, quand un bloc est sélectionné.
• La plupart des blocs ont cet onglet. Le tableau, le logo, le PDF, l’embed, la table des matières, le menu de navigation et ses liens, la recherche, les filtres et la pagination d’une liste ne l’ont pas. Animez alors le conteneur qui les entoure.
• Les animations ne se jouent pas dans l’éditeur. Pour les voir, ouvrez la page sur votre Staging.
• Un visiteur qui demande moins de mouvement voit vos blocs sans animation, dans leur état final.

Ajouter une animation

1. Sélectionnez le bloc et ouvrez l’onglet Animations.
2. Cliquez sur Ajouter une animation. Une carte s’ajoute à la liste et s’ouvre.
3. Ouvrez le menu Effet, qui affiche Choisir un effet…, puis choisissez un effet. Chaque effet est décrit dans le menu.
4. Choisissez le Déclencheur, puis le Comportement.
5. Réglez la Fonction de progression, la Durée (ms) et l’Attente (ms), puis les options propres à l’effet.

Chaque animation s’affiche en résumé sur une ligne, par exemple 1. Compteur, avec un badge qui dit quand elle part. Une seule carte est ouverte à la fois. La corbeille Retirer l’animation la supprime.

Un bloc peut porter plusieurs animations, mais un même effet n’y figure qu’une fois : un effet déjà utilisé quitte le menu des autres cartes. Deux effets de mouvement sur le même bloc peuvent se contrarier. Préférez un seul effet de mouvement par bloc, de courte durée.

Choisir un effet

Le menu Effet range les effets en trois groupes : Effets de texte, Effets de bloc et Personnalisé.

@keyframes personnalisée, seul effet du groupe Personnalisé, joue une animation que vous importez : voir la section « Importer une animation ». Parallaxe et Ajuster à un bloc sont décrits dans Animer au défilement.

Le mouvement d’une icône animée se choisit avec l’icône. Une entrée Geste de l’icône apparaît alors dans la liste. Elle se règle comme les autres animations.

Choisir quand l’animation part

Le menu Déclencheur s’affiche quand l’effet laisse un choix. Sinon, le seul déclencheur possible est indiqué sous l’effet.

Inclinaison 3D, Décalage, Magnétique et Écarter les voisins ne partent qu’Au survol.

Régler le moment où le bloc est visible

Avec Quand il est visible, le réglage Se déclenche dit jusqu’où le bloc doit être entré à l’écran. Chaque choix est une ligne de l’écran, que le haut du bloc doit atteindre.

Tout en bas d’une page, un bloc ne peut pas toujours monter jusqu’à sa ligne. Son animation part alors quand la page arrive au bout.

Animer au clic

Un clic sur le bloc active le bloc et un second clic le désactive. Le Comportement décide de la suite.

Choisir le comportement

Le réglage Comportement ne s’affiche pas sur les effets qui suivent le pointeur.

Régler la durée

Certains effets ajoutent un pas : Pas de la cascade (ms) pour Enfants en cascade et Texte éclaté, Pas entre les lettres (ms) pour Texte écrit. La durée de Texte écrit est celle de ses lettres.

Enchaîner plusieurs animations

Une animation placée sous une autre animation qui se termine peut partir avec elle ou après elle.

1. Rangez les animations dans l’ordre voulu avec les flèches Monter et Descendre de leur résumé.
2. Ouvrez la carte de l’animation qui suit.
3. Sous Départ, choisissez Avec la précédente ou Après la précédente. Au déclencheur la laisse partir sur son propre déclencheur.

Quand deux animations au moins la précèdent, le réglage Suit choisit laquelle elle suit. Deux animations peuvent ainsi partir avec la même première. Le résumé indique alors par exemple Avec la n° 1.

Une animation ne suit qu’une animation listée au-dessus d’elle. Une animation Infinie, une animation Au défilement et Texte éclaté ne peuvent pas être suivies : elles n’ont pas de fin connue.

Régler les options d’un effet

Chaque effet ajoute ses propres réglages sous le rythme. Le tableau suivant donne les plus courants.

Sans couleur choisie, un effet tracé se dessine dans la couleur du texte du bloc. Surlignage prend la couleur principale de votre design system.

Importer une animation

L’effet @keyframes personnalisée joue une animation écrite en CSS et rangée dans une bibliothèque commune à tout le site.

1. Choisissez l’effet @keyframes personnalisée.
2. À côté de Bibliothèque d’animations, cliquez sur + (Nouvelle animation).
3. Dans le champ CSS @keyframes, collez un bloc @keyframes.
4. Cliquez sur Enregistrer l’animation. Elle rejoint la bibliothèque.

• Une animation contient un seul bloc @keyframes, rien avant ni après. Les étapes acceptées sont from, to et les pourcentages entiers de 0 à 100 %.
• Seules les transformations, l’opacité, les couleurs, les filtres, les découpes, les ombres et le tracé des SVG sont gardés. Les autres propriétés sont retirées à l’import.
• Une balise, @import, @media, @supports ou url() fait refuser l’import.
• Modifier une animation en gardant son nom met à jour tous les blocs qui l’utilisent. Changer son nom crée une animation.

Le crayon Modifier l’animation rouvre la source et le bouton Supprimer retire l’animation de la bibliothèque.

Activer un autre bloc à la fin

Le réglage En finissant, activer rend actif un autre bloc quand l’animation se termine. Ce bloc peut alors lancer ses animations Quand il est activé. La liste propose les blocs de la page qui ont une ancre HTML.

En Jouer une fois, le bloc activé le reste. En Rejouer ou Infinie, il est relâché quand l’animation se retire.

Faire réagir d’autres blocs

La partie Interactions de l’onglet Animations relie un bloc à d’autres.

Chaque enfant activé fait ce que vous lui avez réglé pour l’état actif : ses couleurs à l’état Actif de l’onglet Styles, Masquer ce bloc pour apparaître ou disparaître, ou une animation Quand il est activé.

Exemple : la légende d’une diapositive

Le titre de chaque diapositive entre à son tour quand elle s’affiche.

1. Sélectionnez une diapositive et activez Transmettre l’état actif aux enfants.
2. Sélectionnez le titre de sa légende et ajoutez-lui une animation Glissement.
3. Réglez son Déclencheur sur Quand il est activé.

Chaque fois que la diapositive s’affiche, son titre entre en glissant.

Animer un bloc transformé

Une animation s’ajoute aux réglages du panneau Effets : une carte inclinée glisse ou zoome en restant inclinée.

Respecter les visiteurs sensibles au mouvement

Un visiteur peut demander moins de mouvement dans les réglages de son appareil, ou avec un sélecteur d’animations posé sur votre site. Pour ce visiteur, trois choses changent.

• les apparitions s’affichent d’emblée dans leur état final et un texte écrit lettre par lettre s’affiche entier ;
• rien ne suit le pointeur ni le défilement et les icônes animées se figent ;
• un compteur garde le nombre que vous avez écrit, Mots qui défilent son premier mot et Échelle la taille d’origine du bloc.

Le sélecteur d’animations est décrit dans Sélecteurs d’apparence et d’animations.

Voir aussi

• Animer au défilement
• Régler la taille, les bordures et les effets
• Ouvrir une modale ou un panneau latéral