Générateur d’animation CSS
Ajustez les préréglages de mouvement ou les images clés et lancez l’animation pour la vérifier. Récupérez le CSS à utiliser sur une page web ainsi qu’un exemple d’utilisation HTML.
Ce que vous pouvez faire
Ajuster le mouvement à partir d’un préréglage
Choisissez parmi 12 types, y compris des entrées, des sorties et une rotation. Modifiez la durée et la répétition selon vos besoins.
Modifier également les états intermédiaires
Indiquez le déplacement, la rotation, l’échelle et l’opacité pour chaque image clé, puis vérifiez le mouvement généré.
Obtenir le CSS et le HTML
Copiez ou enregistrez le CSS de l’animation et un exemple d’utilisation HTML avec la même classe.
Mode d’emploi
Choisir un préréglage
Choisissez le mouvement souhaité et définissez la durée d’une lecture. La sélection d’un autre préréglage remplace également les paramètres que vous avez ajustés.
Ajuster uniquement les éléments nécessaires
Ouvrez les détails de lecture ou les images clés pour modifier le mouvement intermédiaire, le sens, la répétition et d’autres paramètres.
Générer et lire
Vérifiez le résultat avec « Générer le CSS et afficher l’aperçu ». Si vous modifiez un paramètre, générez-le à nouveau.
Obtenir le CSS et le HTML
Appliquez le CSS et ajoutez la classe toollet-motion à un élément HTML. Utilisez l’exemple HTML avec le CSS.
Utile pour
Créer une animation d’entrée
Utiliser un préréglage d’apparition progressive ou d’entrée par le bas pour ajuster le mouvement et la vitesse d’arrivée.
Animer un bouton lors d’une interaction
Modifier la condition de démarrage en survol ou en focus clavier pour créer un mouvement qui réagit à l’interaction.
Comprendre les images clés et les conditions de lecture
États intermédiaires et durée
Le pourcentage d’une image clé indique sa position au cours d’une lecture. Pour une animation d’une seconde, 50 % correspond à 0,5 seconde. La fonction d’accélération détermine la variation des valeurs entre les images clés.
Déplacement, rotation et apparence
La position horizontale ou verticale indique le déplacement par rapport à la position d’origine. Une échelle de 1 correspond à la taille d’origine ; une opacité de 0 est transparente et une opacité de 1 est opaque.
Délai, répétition et sens
Le délai est ajouté une seule fois avant le début de la lecture. Pour une lecture avec un nombre fini de répétitions, la durée totale est égale au délai + la durée d’une lecture × le nombre de répétitions. L’alternance inverse le sens de lecture entre chaque répétition.
États avant et après la lecture
Choisissez l’état affiché pendant le délai et après la fin de la lecture. Les paramètres de lecture inversée et alternée modifient les positions des images clés utilisées au début et à la fin de la lecture.
Paramètres de réduction des animations
Le CSS généré prend en charge le paramètre de réduction des animations de votre appareil. Il arrête l’animation et utilise l’état de fin déterminé par le sens et le nombre de répétitions configurés. En cas de lecture infinie, il utilise l’état de fin de la première lecture.
Foire aux questions
Puis-je lancer l’animation une seule fois ?
Désactivez « Garder la répétition » et réglez le nombre de répétitions sur 1. Les préréglages standard commencent par une lecture, tandis que la rotation et le flottement sont configurés par défaut pour se répéter en continu.
À quel élément dois-je appliquer le CSS ?
Ajoutez la classe toollet-motion à un élément HTML et utilisez-la avec le CSS généré. L’exemple d’utilisation HTML est un fragment d’élément bouton, et non une page web autonome complète.
Combien d’images clés puis-je créer ?
Vous pouvez créer de 2 à 8 images clés, en comptant le début à 0 % et la fin à 100 %. L’ajout d’une image clé la place au milieu de l’intervalle le plus large. Le début et la fin ne peuvent pas être supprimés ; seules leurs positions en % sont fixes.
L’aperçu a disparu après la modification d’un paramètre.
Les résultats sont effacés lorsque les paramètres changent afin d’éviter d’utiliser par erreur un mouvement ou un code correspondant aux paramètres précédents. Générez-les à nouveau pour vérifier les paramètres actuels.
Pourquoi l’aperçu ne bouge-t-il pas ?
Le mouvement s’arrête si la réduction des animations est activée sur votre appareil. Pour les paramètres de survol et de focus, vérifiez également les conditions de démarrage. L’aperçu se met en pause lorsque vous quittez cet onglet.
Puis-je utiliser plusieurs animations sur la même page ?
La classe générée et les noms des images clés sont partagés. Pour utiliser des animations distinctes, modifiez les deux noms pour chaque animation et répercutez ces changements dans le HTML correspondant.
Saisie et résultats
- Paramètres
- 12 préréglages, 2 à 8 images clés et une durée de 0,2 à 60 secondes.
- Lecture
- Délai de 0 à 60 secondes, de 1 à 100 répétitions ou répétition infinie, fonction d’accélération, sens, états avant et après la lecture et conditions de démarrage.
- Résultats
- CSS et exemple d’utilisation HTML. Seul le mouvement est défini ; aucune page web complète ni fichier vidéo n’est créé.