Ease-out

As explained in Math for Web Design

ease-out is a CSS timing-function keyword that starts an animation quickly and decelerates toward the end.

ease-out is a CSS timing-function keyword for motion that starts quickly, then decelerates into its final value. It suits interfaces where an element should feel responsive without stopping abruptly. section 11.2.3

Its cubic Bézier curve is cubic-bezier(0, 0, 0.58, 1). Most of the change happens near the beginning, while the curve levels off toward the end like an object settling through friction. section 11.1.4 section 11.2.3

Use ease-out when:

• A modal should appear quickly and settle gently. section 11.4
• A button or menu should provide welcoming, responsive motion. section 11.2.3 section 11.4
• A transition should avoid the jump caused by delaying nearly all movement until the end. section 11.4

A settling transition

.element { transition: transform 1s ease-out; } The equivalent explicit curve is cubic-bezier(0, 0, 0.58, 1). section 11.2.3

Figure 11.9 The cubic Bézier curve defined by the ease-out keyword or cubic -bezier(0, 0, 0.58, 1)

Inspect the ease-out curve to see its sharp initial rise and gradual leveling toward the final state. section 11.2.3

How Math for Web Design covers it

How deep it goes

Explains the keyword through its cubic Bézier coordinates and control-point roles, stopping short of deeper curve derivation.

Examples

Uses modal, mobile-menu, button, fade, and toggle-switch animations to compare responsive motion profiles.

What it assumes

Assumes basic CSS animation or transition knowledge while teaching Bézier control-point roles from the animation context.

What you can do after

Apply it via CSS to make interface elements appear quickly and settle smoothly.

How it connects

Connects cubic Bézier curves with ease-in, ease-in-out, linear, CSS transitions, and easing functions.

liveBookmanning.com

Read Math for Web Design on liveBook Get the book at manning.com

Related concepts

• timing functionkind of · A CSS timing function maps elapsed time to progress through a transition or animation.
• ease-incontrasts with · ease-in is a CSS timing-function keyword that starts an animation slowly and accelerates toward the end.

This explainer was generated by Manning's knowledge graph from the text of Math for Web Design. The section links point to the parts of the book it draws on.