# 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.

![L’onglet Animations du chiffre 12 : la carte 1. Compteur et son badge Quand il est visible, l’effet Compteur, le déclencheur Quand il est visible et le réglage Se déclenche sur Une fois entré.](https://static.lovelyrender.com/uploads/2026/10/53-editor-animations-tab.png)

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é**.

| Effet | Rendu |
| --- | --- |
| **Cercle** | Un cercle tracé à la main autour du contenu. |
| **Soulignement** | Un soulignement tracé à la main sous le contenu. |
| **Cadre** | Un cadre tracé à la main autour du texte. |
| **Surlignage** | Un surlignage au marqueur, qui suit les retours à la ligne. |
| **Texte barré** | Un trait tracé à la main en travers du texte. |
| **Barré d’une croix** | Une croix tracée à la main sur le texte. |
| **Crochets** | Des crochets tracés à la main autour du texte. |
| **Grossir le texte** | La graisse de la police augmente, mot après mot. |
| **Mots qui défilent** | Les mots du bloc, séparés par une virgule et une espace, se remplacent l’un l’autre. |
| **Texte éclaté** | Le texte apparaît mot après mot, ou caractère après caractère. |
| **Texte écrit** | Le texte s’écrit lettre après lettre, au clavier ou à la main. |
| **Compteur** | Le nombre du bloc monte depuis zéro. Un lecteur d’écran annonce toujours le vrai nombre. |

| Effet | Rendu |
| --- | --- |
| **Glissement** | Le bloc entre en glissant depuis une direction choisie. |
| **Fondu d’entrée** | Le bloc apparaît en fondu. |
| **Zoom avant** | Le bloc grandit jusqu’à sa place. |
| **Retournement 3D** | Le bloc entre en pivotant autour de l’axe vertical. |
| **Expansion** | Le bloc se révèle à travers une forme qui s’agrandit. |
| **Ken Burns** | Un zoom et un panoramique lents, sur une image. |
| **Miroitement** | Un balayage lumineux passe sur le bloc. |
| **Bordure en dégradé** | Un contour en dégradé tourne autour du bloc. |
| **Échelle** | Le bloc change de taille entre deux valeurs. |
| **Inclinaison 3D** | Le bloc s’incline en 3D vers le pointeur. |
| **Décalage** | Le bloc bouge légèrement avec le pointeur, sur son bloc parent. |
| **Magnétique** | Le bloc dérive vers le pointeur. |
| **Écarter les voisins** | Posé sur un conteneur, il écarte les autres enfants de celui que le pointeur survole. |
| **Enfants en cascade** | Les enfants directs du bloc, ou ses mots, s’animent l’un après l’autre. |
| **Contour ondulé** | Un contour ondulé tracé à la main. |
| **Tracer** | Les traits d’une icône ou d’un SVG se dessinent du début à la fin. |
| **Parallaxe** | Le bloc se déplace à une autre vitesse pendant le défilement. |
| **Ajuster à un bloc** | Le bloc se resserre sur un autre bloc pendant le défilement. |

**@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](https://lovelyrender.com/fr/documentation/animations-au-defilement/).

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.

| Déclencheur | Départ de l’animation |
| --- | --- |
| **Quand il est visible** | Quand le bloc entre à l’écran pendant le défilement. |
| **Au survol** | Quand le pointeur passe sur le bloc. |
| **Au clic** | Quand le visiteur clique sur le bloc. |
| **Quand il est activé** | Quand le bloc devient actif : l’onglet ou la diapositive affichés, ou un bloc qu’un autre active. |
| **Au défilement** | L’animation avance au rythme du défilement. Voir [Animer au défilement](https://lovelyrender.com/fr/documentation/animations-au-defilement/). |

**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.

| Choix | Départ |
| --- | --- |
| **Dès qu’il apparaît** | Dès que le haut du bloc entre par le bas de l’écran. Pour une grande section. |
| **Une fois entré** | Quand le haut du bloc est à 80 px du bas de l’écran. Valeur par défaut. |
| **Bien entré dans l’écran** | Quand le haut du bloc arrive aux deux tiers de l’écran environ. Pour un compteur ou un tracé à la main. |
| **À une hauteur donnée** | Quand le haut du bloc atteint la hauteur du curseur, de 10 à 90 % de l’écran depuis le haut. Le curseur s’ouvre à 50. |

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.

| Comportement | Effet du clic |
| --- | --- |
| **Jouer une fois** | Le premier clic joue l’animation, qui reste dans son état final. |
| **Rejouer** | Un clic joue l’animation, le suivant la rembobine, le troisième la rejoue. |

**Attention :** Le clic est capté sur tout le bloc. Un clic sur un lien ou un bouton placé dans le bloc déclenche aussi l’animation. Animez plutôt un conteneur qui n’englobe pas l’élément cliquable.

## Choisir le comportement

| Comportement | Effet |
| --- | --- |
| **Jouer une fois** | L’animation joue une fois et reste dans son état final, même si le bloc redevient actif. Valeur par défaut. |
| **Rejouer** | L’animation rejoue à chaque entrée à l’écran, à chaque survol ou à chaque activation. |
| **Infinie** | L’animation boucle tant que le bloc est actif. Proposé aux effets qui forment un cycle : **Ken Burns**, **Bordure en dégradé**, **Miroitement**, **@keyframes personnalisée**, **Enfants en cascade**, **Compteur**, **Mots qui défilent**, **Tracer** et **Échelle** avec l’option **Pulsation**. |

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

## Régler la durée

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Fonction de progression** | La courbe du mouvement : **Démarrage et arrêt progressifs**, **Démarrage progressif**, **Arrêt progressif**, **Linéaire** ou **Personnalisée (cubic-bezier)**. | Celle de l’effet |
| **Durée (ms)** | La durée de l’animation. | Celle de l’effet, par exemple 600 pour **Fondu d’entrée** et 1 000 pour **Soulignement** |
| **Attente (ms)** | Le délai avant le départ. | 0 |

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.

![Trois animations sur un titre : 1. Fondu d’entrée avec le badge Quand il est visible, 2. Soulignement avec le badge Avec la précédente, 3. Surlignage avec le badge Après la précédente, puis le bouton Ajouter une animation.](https://static.lovelyrender.com/uploads/2026/10/994-doc-pages2-anim-liste.png)

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.

| Effet | Options |
| --- | --- |
| **Glissement** | **Direction**, parmi huit, **Vers le haut** par défaut. **Distance**, 96 px par défaut. **Fondu**, coché par défaut : le bloc apparaît en fondu pendant le glissement. **Flou** : le bloc se précise depuis un flou léger. |
| **Expansion** | **Forme** : **Horizontale**, **Verticale**, **Radiale**, **Losange**, **Depuis le haut**, **Depuis la gauche** ou **Lignes**. |
| **Échelle** | **Échelle de départ** (1), **Échelle d’arrivée** (1,1) et **Pulsation**, qui revient à la valeur de départ. |
| **Miroitement** | **Direction**, **Appliquer à** (**Tout le bloc** ou **Le texte seul**), **Couleur** et **Largeur de la bande**. |
| **Texte écrit** | **Écriture** : **Au clavier**, avec un curseur, **À la main**, ou **Lettres**, sans curseur. |
| **Texte éclaté** | **Découper par** : **Mot** ou **Caractère**. |
| **Enfants en cascade** | **Cibles** (**Enfants directs** ou **Mots**), **Disposition**, puis l’opacité, l’échelle et la position de départ et d’arrivée. |
| Effets tracés à la main | **Couleur**, **Graisse** et **Variation visuelle**, dont le bouton **Nouvelle variation** tire un autre tracé. |

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

**Attention :** Ne posez pas d’effet tracé sur un bloc en **Mots qui défilent** : chaque mot remplace le contenu du bloc, y compris le trait.

## 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.

| Réglage | Effet |
| --- | --- |
| **Transmettre l’état actif aux enfants** | Quand le bloc devient actif, ses enfants directs le deviennent aussi. Ils cessent de l’être avec lui. |
| **Ajouter un bloc cible** | Choisit un bloc de la page par son ancre, l’**Événement source** (**Clic**, **Survol** ou **À l’activation**) et l’**Action** sur la cible (**Activer**, **Désactiver**, **Basculer** ou **Cliquer**). |
| **Synchroniser les groupes d’enfants** | Posé sur un parent, il fait avancer ensemble les éléments de même rang de ses listes d’enfants. |

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.

| Réglage | Avec une animation |
| --- | --- |
| **Rotation**, **Translation**, **Échelle**, **Inclinaison** | Restent appliqués. |
| **Opacité**, **Filtre**, **Tracé de découpe** | Ne se combinent pas avec un effet d’apparition, qui les anime lui-même. Réglés sur le bloc, ils l’emportent et l’effet ne les anime plus : un fondu sur un bloc à 50 % d’opacité ne fait rien. Réglés par un style enregistré, c’est l’effet qui l’emporte. |

## 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](https://lovelyrender.com/fr/documentation/bloc-selecteurs-d-apparence/).

## Voir aussi

- [Animer au défilement](https://lovelyrender.com/fr/documentation/animations-au-defilement/)
- [Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-effets/)
- [Ouvrir une modale ou un panneau latéral](https://lovelyrender.com/fr/documentation/modales/)