Understanding CSS Transitions (ease) on Webflow

Documentation
March 20, 2023
3 min
Ease editor animations in Webflow
Use AI to summarize this article
Key points

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)

Summary table of CSS animation values (ease)

Feature Overview from the Webflow Interface

Access from Triggers ⚡️(JS Animations)

Styling transition options panel for animation triggers in Webflow

Access from CSS (transition styles)

Easing editor in the Webflow Designer interface

Check out a visual preview of all the ease effects in this Webflow project!

Visual demonstration of different Ease effects on Webflow
Florian Bodelot
Florian Bodelot
Co-founder

Suggested articles

A woman speaks on stage at a conference, wearing a headset microphone. Behind her, a large black screen displays the question “What then?” in bold white text.
Events
Webflow

Digidop attends FLOWconf 2025, the biggest Webflow & marketing event in Europe.

Digidop attends FLOWconf 2025, the biggest Webflow & marketing event in Europe.
Visual overview of several modern web typefaces in 2025, each displayed on a vibrant background: Editorial New, DM Serif Display, Aeonik, SF Pro Rounded, Rader, Champ, Monument, Canicule, Clash Display, Supply, Agrandir, and more — a graphic composition highlighting typographic diversity.
Documentation
Design

The 20 Best Fonts for a Modern and Impactful Website in 2025

The 20 Best Fonts for a Modern and Impactful Website in 2025
Mosaic of homepage designs from several Webflow agencies (Digidop, N4, Refokus, Flow Ninja, Tonik, Finsweet, Edgar Allan), showcasing diverse creative approaches and visual identities centered around the Webflow logo.
Storytelling
Webflow

My Top 7 Webflow Agencies in 2025 (From a Founder’s Perspective)

My Top 7 Webflow Agencies in 2025 (From a Founder’s Perspective)

Want to turn your website into your most valuable asset?

Contact us today