Ease-in

As explained in Math for Web Design

ease-in is a CSS timing-function keyword that starts an animation slowly and accelerates toward the end.

ease-in is a CSS timing-function keyword for motion that starts slowly and accelerates toward the end. Its cubic Bézier curve stays near the bottom-left before rising sharply, so most change happens late. section 11.1.4 section 11.2.3

Read the curve through its timing and progress coordinates:

• Treat x as elapsed time and y as animation progress. section 11.1.4
• Use the first control point to shape the beginning and the second to shape the ending behavior. section 11.1.4 section 11.5
• Choose ease-in when a notification or other element should begin gently and accelerate away. section 11.4

A slow-start, fast-finish curve

A custom curve such as cubic-bezier(0.7, 0, 0.8, 0) delays acceleration until late in a two-second slide, producing dramatic final acceleration. section 11.4

Figure 11.8 The cubic Bézier curve defined by the ease-in keyword or cubic -bezier(0.42, 0, 1, 1)

Inspect the curve defined by the ease-in keyword and compare its late-rising shape with other timing functions. section 11.2.3

How Math for Web Design covers it

How deep it goes

Explains cubic Bézier coordinates and control-point roles, but stops short of deriving the curve mathematically.

Examples

Uses a late-accelerating slide, a departing notification, and the ease-in cubic Bézier curve.

What it assumes

Assumes basic web animation context while introducing cubic Bézier points and their timing effects.

What you can do after

Apply ease-in through a CSS timing function or tune a cubic-bezier curve for delayed acceleration.

How it connects

Connects ease-in with cubic Bézier curves, animation, ease-out, and ease-in-out.

liveBookmanning.com

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

Related concepts

• ease-outcontrasts with · Ease-out is a CSS timing-function keyword that starts an animation or transition rapidly and decelerates it toward completion.

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.