Générateur de Keyframes d'Animation

• Créateur visuel de keyframes : ajoutez et organisez des arrêts de keyframe à n'importe quel pourcentage (0 %-100 %) avec une interface visuelle intuitive. Chaque arrêt prend en charge l'opacité, translate (X/Y), rotate, scale et background-color, tous réglables via des curseurs et sélecteurs de couleur.
• Aperçu d'animation en temps réel : voyez votre animation prendre vie grâce à un panneau d'aperçu qui joue les keyframes en temps réel. Ajustez durée, easing et nombre d'itérations instantanément - l'aperçu se met à jour sans rechargement de page.
• Sortie CSS @keyframes propre : obtenez des règles CSS @keyframes correctement formatées avec toutes vos propriétés d'animation. Le générateur ne sort que les propriétés réellement utilisées - aucune déclaration inutile. Copiez tout le CSS de l'animation en un clic.
• 100 % privé et gratuit : toute la génération d'animations et le rendu d'aperçu se font localement dans votre navigateur. Aucune donnée n'est envoyée à un serveur, aucune inscription n'est requise et il n'y a aucune limite d'utilisation. Utilisez-le pour tout projet - personnel, commercial ou client.

• Animations de page d'atterrissage : créez des animations d'entrée engageantes pour les sections hero, les boutons d'appel à l'action et les cartes de fonctionnalités. Utilisez des effets fade-in, slide-up ou scale pour attirer l'attention sur les éléments clés et améliorer l'engagement.
• Indicateurs de chargement et de progression : concevez des animations de chargement personnalisées, des indicateurs de progression et des effets d'écran squelette. Les animations de keyframes sont parfaites pour créer des états de chargement captivants qui maintiennent l'utilisateur impliqué pendant le chargement.
• Micro-interactions et retours : ajoutez un retour de mouvement subtil aux éléments d'interface comme les boutons, interrupteurs et champs de formulaire. Un petit rebond ou une transition de couleur au survol ou au clic offre un retour visuel satisfaisant.
• Navigation de style application mobile : implémentez des transitions de navigation de type mobile comme des menus coulissants, des bottom sheets et des animations de barre d'onglets. Les animations de keyframes font paraître l'expérience web mobile native et soignée.
• Animations pour newsletters e-mail : créez des animations CSS pour vos newsletters compatibles avec les clients de messagerie qui les prennent en charge. De simples animations d'opacité et de transformation peuvent faire ressortir vos campagnes dans des boîtes de réception encombrées.
• Prototypage et tests de design : prototypez rapidement des idées d'animation en phase de design sans écrire de code. Expérimentez le timing, l'easing et les combinaisons de propriétés pour trouver le mouvement parfait pour votre design system.

CSS @keyframes est une puissante at-rule CSS qui vous permet de définir des animations complexes en spécifiant des valeurs de propriétés à différents points (keyframes) d'une timeline. Contrairement aux transitions CSS qui n'animent qu'entre deux états (début et fin), les animations de keyframes peuvent avoir plusieurs états intermédiaires, permettant des séquences de mouvement sophistiquées comme des rebonds, des cycles de couleur et des transformations en plusieurs étapes.

Chaque arrêt de keyframe est défini comme un pourcentage de la durée totale de l'animation, de 0 % (le début) à 100 % (la fin). À chaque arrêt, vous définissez les valeurs des propriétés CSS que l'élément animé doit avoir à ce point. Le navigateur interpole automatiquement (adoucit) les valeurs entre les arrêts, créant un mouvement fluide. Vous pouvez contrôler la fonction de timing par animation ou par keyframe pour un contrôle précis du comportement d'easing.

Notre générateur offre une interface visuelle pour créer des animations @keyframes sans écrire de CSS à la main. Voici comment cela fonctionne :

1. Ajoutez des arrêts de keyframe : commencez avec les arrêts par défaut ou choisissez une animation préréglée (Fade In, Slide In, Bounce, Spin & Scale, Color Cycle, Wobble). Chaque arrêt représente un point dans la timeline. Vous pouvez ajouter jusqu'à 10 arrêts et ajuster leur position avec le curseur de pourcentage.
2. Configurez les propriétés par arrêt : pour chaque arrêt, ajustez l'opacité, la position horizontale et verticale (translate), la rotation, l'échelle et la couleur de fond avec les curseurs et le sélecteur de couleur. L'élément d'aperçu animé se met à jour en temps réel.
3. Définissez les paramètres de l'animation : utilisez le curseur de durée (0,1 s à 10 s) pour la vitesse, choisissez une fonction d'easing (Linear, Ease, Bounce, etc.) et définissez le nombre d'itérations (1-10 ou infini). Cliquez sur Play pour voir votre animation, puis copiez le CSS généré.

• Opacity : contrôle la transparence de l'élément à chaque arrêt. Les valeurs vont de 0 (totalement transparent) à 1 (totalement opaque). Utilisez opacity pour les effets fade-in, fade-out et pulsation.
• Translate X/Y (px) : déplace l'élément horizontalement et verticalement par rapport à sa position d'origine. Les valeurs négatives déplacent à gauche/haut, les positives à droite/bas. Combinez avec d'autres transformations pour des animations de glissement, rebond et flottement.
• Rotate (deg) : fait pivoter l'élément dans le sens horaire (positif) ou antihoraire (négatif) autour de son centre. À utiliser pour des effets de rotation, d'oscillation et de balancement. Les valeurs de -360 à 360 degrés sont prises en charge.
• Scale : modifie la taille de l'élément par rapport à sa taille d'origine. 1 est la taille normale, 0,5 la moitié et 2 le double. Combinez avec opacity pour des effets d'entrée spectaculaires.
• Couleur de fond : définit la couleur de fond de l'élément à chaque arrêt. Le navigateur interpole en douceur entre les couleurs, ce qui permet des effets de cycle de couleur et des transitions d'ambiance.
• Ordre des transformations : lorsque plusieurs fonctions de transformation sont utilisées, elles s'appliquent dans l'ordre - translate d'abord, puis rotate, puis scale. Cet ordre affecte le résultat visuel final et est géré correctement par le CSS généré.

Votre confidentialité est notre priorité. Le générateur de keyframes d'animation traite tout localement dans votre navigateur grâce au rendu CSS intégré au moteur du navigateur. Aucune donnée n'est envoyée à un serveur - vos réglages d'animation et configurations de keyframes ne quittent jamais votre appareil. L'outil est entièrement gratuit, sans inscription, sans limite d'utilisation et sans restriction cachée. Utilisez-le en confiance pour vos projets personnels, sites commerciaux ou travaux clients.