Configurer les animations
Slidde.co vous permet d'appliquer facilement des animations de trame clé CSS standard à vos éléments web. Voici un guide étape par étape pour vous aider à démarrer.
l'option Animation dans la barre latérale
- Sélectionnez un élément : Cliquez sur n'importe quel élément de votre page.
- Ouvrez la fenêtre modale Animation : Dans la barre latérale droite, cliquez sur l'onglet Animations , vous trouverez l'option Animation. Cliquez dessus pour ouvrir une fenêtre modale.
- Commencez avec des préréglages : Nous vous recommandons de commencer avec des animations préréglées, que vous pourrez ensuite modifier selon vos besoins. Vous pouvez cliquer sur les boutons de préréglage pour remplacer par un préréglage. Si vous cliquez sur l'icône plus dans le bouton, le préréglage sera ajouté à l'animation actuelle.
Personnaliser les animations
La fenêtre modale d'animation simplifie le processus de configuration des animations de trame clé CSS dans une interface low-code, la rendant accessible même si vous n'êtes pas familier avec le codage.
Les animations de trame clé 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 trames clés 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 de trame clé :
- Recherchez en ligne : Googlez vos questions spécifiques ; il existe de nombreux exemples et ressources disponibles.
- Tutoriel sur les trames clés CSS : Consultez le guide officiel CSS keyframes sur MDN pour des informations complètes.
Déclencheur
Ce champ contrôle quand l'animation est jouée.
- Élément affiché : C'est l'option par défaut. L'animation sera déclenchée lorsque l'élément est soit défilé dans la vue, soit la section contenant est affichée Section de hachage
- Élément affiché (rejouer à chaque fois) : Identique à ci-dessus, sauf que l'animation sera rejouée chaque fois que l'élément est affiché.
- Page chargée : L'animation sera déclenchée lorsque la page est chargée.
Cible(s)
Habituellement, vous n'avez pas besoin de définir cela. La valeur par défaut est & ce qui signifie l'élément racine.
Cependant, il y a certains cas où vous devrez le définir.
Pour animer l'élément Fond avancé, vous pouvez définir Cible(s) sur Premier élément enfant, puisque l'élément Fond avancé sera toujours le premier enfant de l'élément racine.
Pour appliquer un délai échelonné à tous les éléments enfants. Consultez la section Délai et délai échelonné pour plus de détails.
Délai et délai échelonné
Si vous définissez Délai à 1000ms, l'animation se jouera après avoir attendu 1000ms.
Si vous définissez Décalage à 50ms et définissez les cibles sur Tous les éléments enfants directs. L'animation s'appliquera à chacun des éléments enfants directs, et attendra
- premier élément, 1000ms,
- deuxième élément, 1050ms,
- troisième élément, 1100ms,
- ...
Échelonnement de texte
Cela fonctionne pour un composant Texte.
Si vous définissez Décalage et définissez les cibles sur Toutes les lettres. L'effet d'échelonnement sera appliqué à chaque lettre.
Utiliser la propriété css animation
Une animation css simple est toujours disponible pour tous les éléments dans CSS. Mais vous devrez peut-être activer Disable in canvas pour cette règle css spécifique afin de permettre une édition plus facile dans l'éditeur.