Comment générer une animation CSS d’apparition

Préparer une animation CSS d’apparition

Ce générateur sert à préparer rapidement le texte CSS d’une animation d’apparition fondée sur l’opacité et un déplacement vertical. Il est utile lorsque vous souhaitez obtenir une règle @keyframes ainsi que la déclaration d’animation associée, sans rédiger vous-même chaque partie de cette structure. Les réglages disponibles portent sur le nom de l’animation, sa durée, sa courbe d’accélération, sa direction et son mode de remplissage.

Générer le texte CSS étape par étape

1. Saisissez le nom que vous voulez donner à l’animation. Si vous laissez ce champ vide, le générateur utilise myAnimation à la place du nom manquant.

2. Indiquez la durée, puis choisissez la courbe d’accélération, la direction et le mode de remplissage. La durée est insérée dans la déclaration CSS avec l’unité s.

3. Lancez la génération avec les valeurs choisies. Une exécution réussie produit un texte CSS comprenant une animation avec images-clés et une déclaration d’animation pour un élément.

4. Copiez le texte obtenu dans votre feuille de styles ou dans la zone CSS de votre projet, puis associez la déclaration produite à l’élément concerné. Vérifiez que le nom utilisé dans la déclaration correspond au nom de l’animation généré.

Si vous ne renseignez pas certains paramètres, les valeurs par défaut sont les suivantes : fadeIn pour le nom, 1 pour la durée, ease pour la courbe, normal pour la direction et none pour le mode de remplissage.

Lire et évaluer le résultat

Le résultat contient deux éléments à distinguer. La partie @keyframes décrit l’évolution visuelle, tandis que la déclaration d’animation indique comment l’élément doit l’utiliser. Dans les images-clés générées, l’état initial à 0 % présente une opacité de 0 et un déplacement vertical de 20 px. À 100 %, l’opacité passe à 1 et le déplacement revient à 0. Le nom, la durée et les autres réglages choisis apparaissent dans la déclaration d’animation selon les valeurs fournies ou les valeurs par défaut.

Ce fonctionnement convient donc à une apparition progressive accompagnée d’un mouvement vertical. Il ne produit pas des étapes d’images-clés personnalisées ni des propriétés CSS supplémentaires : le contenu de l’animation reste limité à ces deux étapes, à l’opacité et à la translation verticale.

Exemple pratique

Une carte de contenu doit apparaître progressivement avec un léger déplacement vertical dans une interface web.

Pour une carte qui doit apparaître à l’écran, saisissez slideIn, indiquez 0.8 comme durée, choisissez ease-in, alternate et forwards, puis lancez la génération.

Le texte obtenu contient une règle d’images-clés nommée slideIn, avec une étape à 0 % pour une opacité de 0 et une translation verticale de 20 px, une étape à 100 % pour une opacité de 1 et une translation de 0, ainsi qu’une déclaration utilisant une durée de 0.8 s.

Limites

• Le contenu des images-clés reste limité à deux étapes, à l’opacité et à la translation verticale ; les propriétés ou étapes CSS supplémentaires ne sont pas générées.

Erreurs fréquentes

• Si le nom est laissé vide, le résultat utilise myAnimation au lieu du nom attendu. Saisissez un nom avant de lancer la génération si votre feuille de styles fait référence à un identifiant précis.

Questions fréquentes

Quels paramètres puis-je modifier ?

Vous pouvez fournir un nom, une durée, une courbe d’accélération, une direction et un mode de remplissage. Si ces paramètres sont omis, le générateur applique ses valeurs par défaut.

Que se passe-t-il si je laisse le nom vide ?

Lorsque le nom est vide, il est remplacé par myAnimation avant la production du texte CSS.

Quelle unité est utilisée pour la durée ?

La durée fournie est suivie de l’unité s dans la déclaration d’animation. Le résultat ne précise pas une autre unité de durée.