Comprendre les transitions CSS (ease) sur Webflow

Documentation
November 21, 2022
3 min
Ease editor animations dans webflow
Résumez cet article avec une IA
Points clés de l'article

Lorsque vous faites des animations sur webflow, vous pouvez utiliser différents "mode" pour définir la façon dont l'animation va progresser. Combiné à une valeur temps (timing), ce choix joue un rôle important dans l'effet final de votre animation.

Les choix d'animations par défaut

Par défaut, vous avez dans l'interface designer de webflow la possibilité d'ajouter les 5 styles d'animations les plus populaires.

Transition Linear

L'animation aura la même vitesse du début à la fin.

Transition Ease

C'est le mode utilisé par défaut pour les animations CSS. L'animation aura un départ lent puis rapide, puis finira lentement.

Transition Ease-in

L'animation a un départ lent.

Transition Ease-out

L'animation a une fin lente.

Transition Ease-in-out

L'animation a un départ et une fin lente.

Tableau récapitulatif des transitions CSS

Tableau récapitulatif (contenu en anglais)

Tableau récapitulatif des values des animations CSS (ease)

Vue des fonctionnalités depuis l'interface webflow

Accès depuis les triggers ⚡️(Js Animations)

Panel d'option de style de transition pour les animations triggers dans webflow

Accès depuis le CSS (transitions style)

Easing editor dans l'interface designer de webflow

Découvrez une prévisualisation visuelle de l'ensemble des ease effect sur ce projet Webflow !

Démonstration visuels des différents effet Ease sur Webflow
Florian Bodelot
Florian Bodelot
Co-fondateur

Articles qui devraient vous intéresser

ChatGPT 5.0 OpenAI
News
IA

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1 : Le comparatif IA ultime 2025

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1 : Le comparatif IA ultime 2025
Capture d'écran montrant deux versions de la page d'accueil de Ramify. La version de fond représente un homme debout dans un bureau avec le texte « Vivez l'expérience banque privée, autrement ». La version au premier plan affiche une mise en page plus épurée avec le message « Votre patrimoine, notre expertise ».
Documentation

Comment Digidop a aidé Ramify à augmenter son taux de conversion grâce à une stratégie d’A/B testing avec Optibase ?

Comment Digidop a aidé Ramify à augmenter son taux de conversion grâce à une stratégie d’A/B testing avec Optibase ?
Capture d'écran de l'interface Gmail sur un ordinateur, montrant la boîte de réception contenant 152 e-mails non lus dans l'onglet « Principal ».
Tutoriel
Webflow

3 solutions pour bloquer 99% des spams de vos formulaires web

3 solutions pour bloquer 99% des spams de vos formulaires web

Transformez votre site web en un moteur de croissance.

Nous contacter