When you create animations on Webflow, you can use different "modes" to define how the animation will progress. Combined with a timing value, this choice plays a significant role in the final effect of your animation.
Default Animation Choices
By default, in the Webflow Designer interface, you have the option to add the 5 most popular animation styles.
Linear Transition
The animation will have the same speed from start to finish.
Ease Transition
This is the default mode used for CSS animations. The animation will start slowly, then speed up, and finish slowly.
Ease-in Transition
The animation has a slow start.
Ease-out Transition
The animation has a slow ending.
Ease-in-out Transition
The animation has both a slow start and a slow ending.
Summary Table of CSS Transitions
Summary table (content in English)
Feature Overview from the Webflow Interface
Access from Triggers ⚡️(JS Animations)
Access from CSS (transition styles)
Check out a visual preview of all the ease effects in this Webflow project!
.jpg)
