341 outils gratuits
Outils en ligne
341 outils gratuits, sans inscription ni installation, tout se passe dans votre navigateur.
341 outils gratuits, sans inscription ni installation, tout se passe dans votre navigateur.
Créez des @keyframes avec aperçu live
Écrire une animation CSS demande deux choses qu'on retient mal : la syntaxe des images-clés et le vocabulaire des propriétés qui les pilotent. Cet outil laisse régler la durée, le délai, le nombre de répétitions et la courbe d'accélération sur un aperçu qui tourne en direct, puis rend le bloc complet, images-clés comprises, prêt à coller. Voir le résultat pendant qu'on déplace un curseur vaut mieux que recharger la page à chaque essai. Tout se calcule dans le navigateur, et l'aperçu utilise le vrai moteur d'animation, celui-là même qui exécutera le code chez vos visiteurs.
Entre 150 et 300 millisecondes pour une transition d'interface, jusqu'à une seconde pour une animation d'attention. Au-delà, l'animation devient une attente. La règle pratique : plus l'élément est petit et plus il est proche du clic, plus l'animation doit être courte.
`transform` et `opacity` avant tout : le navigateur les traite sans recalculer la mise en page, ce qui permet de tenir soixante images par seconde même sur un appareil modeste. Animer `width`, `height`, `top` ou `margin` force un recalcul à chaque image et saccade dès que la page est chargée.
Oui, et c'est une ligne de CSS : la requête média `prefers-reduced-motion` permet de couper ou d'atténuer les animations pour les visiteurs qui l'ont demandé dans leur système. Pour certains, une animation ample déclenche un vrai malaise vestibulaire.
Un résultat qui vous paraît faux, une valeur périmée, un cas qui manque ? Signalez-le à contact@topapps.fr