Générateur d’animation d’entrée CSS

Générateur d’animation d’entrée CSS: à quoi ça sert

Choisissez l’effet, la durée, la courbe (avec l’ease-out marqué recommandé), la distance et le délai en cascade entre les éléments. L’aperçu montre six blocs qui entrent et peut être rejoué.

Le code utilise des transitions d’opacity et de transform, un IntersectionObserver pour animer quand l’élément apparaît à l’écran et une version sans déplacement pour les personnes qui préfèrent moins de mouvement. Sans JavaScript, le contenu s’affiche normalement.

Mode d’emploi

1. Choisissez l’effet, la durée et la courbe.
2. Réglez la distance et la cascade et regardez l’aperçu.
3. Copiez le CSS et le script et utilisez la classe anima.

Quand l’utiliser

• Sections de landing pages qui apparaissent au défilement.
• Cartes de services et de produits en cascade.
• Soigner la finition de sites institutionnels.

Questions fréquentes

Quelle durée utiliser ?

Pour les éléments d’interface, de 150 à 300 millisecondes. Pour les sections de pages de présentation, jusqu’à 600 ms environ reste naturel. Des animations trop longues donnent l’impression d’un site lent.

Quelle courbe choisir ?

Pour ce qui entre à l’écran, utilisez une courbe qui ralentit à la fin (un ease-out marqué, comme cubic-bezier(0.23, 1, 0.32, 1)) : le mouvement démarre vite et se pose en douceur. Évitez ease-in pour les entrées, car il retarde justement le début.

Et les personnes qui n’aiment pas le mouvement ?

Le code respecte le réglage de réduction des animations du système (prefers-reduced-motion) : les éléments apparaissent seulement avec un court fondu, sans déplacement.

Comment fonctionne le mode défilement ?

Un IntersectionObserver ajoute la classe visivel lorsque l’élément entre à l’écran. Sans JavaScript, les éléments s’affichent normalement, sans animation.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires