---
title: "Animation : faire apparaître un élément à l'écran"
description: "Déclenchez une apparition animée d'un élément quand il devient visible, avec un préréglage et des réglages de durée, délai, mouvement et rotation."
url: https://docs.vivlab.com/editor/style/transition
---

# Animation

Utilisez **Animation** pour choisir la manière dont un élément apparaît lorsqu'il devient visible à l'écran. Choisissez un effet proposé, puis ajustez sa durée, le temps d'attente avant son démarrage et ses éventuels déplacements ou rotations.

<DocsScreenshot name="editor-animation-presets" alt="Les effets de fondu et de zoom proposés pour l’apparition d’un élément." :width="341" :height="369" />

## Animations prédéfinies

Le sélecteur **Animations prédéfinies** propose neuf effets prêts à l'emploi :

- **Fondu** : l'élément apparaît en fondu, sans mouvement.
- **Fondu vers la droite** : fondu + glissement depuis la droite.
- **Fondu vers la gauche** : fondu + glissement depuis la gauche.
- **Fondu vers le haut** : fondu + glissement depuis le haut.
- **Fondu vers le bas** : fondu + glissement depuis le bas.
- **Zoom avant** : fondu + zoom progressif vers la taille finale.
- **Zoom arrière** : fondu + zoom progressif depuis une taille plus grande.
- **Rotation gauche** : fondu + rotation à partir de la gauche.
- **Rotation droite** : fondu + rotation à partir de la droite.

Choisir un préréglage configure automatiquement la durée à 300 ms et les paramètres ci-dessous.

## Paramètres fins

Vous pouvez ajuster chaque réglage séparément. Les durées sont en millisecondes (ms) : 1000 ms correspondent à une seconde.

- **Durée d'animation** (0–2000 ms) : temps total de l'animation.
- **Délai d'apparition** (0–2000 ms) : temps d'attente avant que l'animation ne démarre, après que l'élément soit devenu visible. Pratique pour faire apparaître plusieurs éléments en cascade.
- **Effet de balayage** (-100 à 100 px) : déplacement vers la gauche ou la droite au démarrage. Positif = vient de la droite, négatif = vient de la gauche.
- **Effet de levée** (-100 à 100 px) : déplacement vers le haut ou le bas au démarrage. Positif = vient du bas, négatif = vient du haut.
- **Effet de zoom** (0–2) : taille de départ par rapport à la taille finale. <1 = départ plus petit, puis zoom avant ; >1 = départ plus grand, puis zoom arrière.
- **Effet de rotation** (-180 à 180°) : angle de rotation au démarrage.

## Réinitialiser

Le bouton **Réinitialiser les paramètres** efface l'animation : l'élément apparaît instantanément, sans transition.