Configurer les animations

Last updated on 10/29/2024@mrbirddev

Slidde.co vous permet d'appliquer facilement des animations CSS keyframe standard à vos éléments web. Voici un guide étape par étape pour vous aider à démarrer.

Étape 1 : Accéder à l'option d'animation

  1. Sélectionnez un élément : Cliquez sur n'importe quel élément de votre page.
  2. Ouvrez le modal userCompOption.rootAnimeConfig : Dans la barre latérale droite, faites défiler jusqu'en bas où vous trouverez l'option userCompOption.rootAnimeConfig. Cliquez dessus pour ouvrir une fenêtre modale.

Étape 2 : Utiliser les animations prédéfinies

  • Commencez avec des préréglages : Nous vous recommandons de commencer avec des animations prédéfinies, que vous pouvez modifier selon vos besoins.
  • Trouvez plus de préréglages : Vous pouvez trouver une liste d'animations prédéfinies sur Animate.css. Si vous avez besoin d'une animation spécifique, faites-le nous savoir, et nous pouvons l'ajouter à la liste.

Étape 3 : Personnaliser les animations

Le modal d'animation simplifie le processus de configuration des animations CSS keyframe dans une interface low-code, la rendant accessible même si vous n'êtes pas familier avec le codage.

Les animations keyframe sont là où vous définissez les propriétés CSS pour certains pourcentages. Et le navigateur gère la transition pour vous.

Par exemple, si vous avez des keyframes comme ceci avec une durée de 4 secondes.

0% translateX(0)

50% translateX(-20px)

100% trasnlateX(0)

L'objet se déplacera de 20px vers le bas pendant 2 secondes, puis remontera de 20px à sa position d'origine pendant 2 secondes.

Si vous rencontrez des problèmes ou souhaitez en savoir plus sur les animations keyframe :

  • Recherchez en ligne : Googlez vos questions spécifiques ; il existe de nombreux exemples et ressources disponibles.
  • Tutoriel sur les keyframes CSS : Consultez le guide officiel CSS keyframes sur MDN pour des informations complètes.