transition-timing-function and transition-delay

transition-timing-function

By default a transition starts slowly, speeds up and slows down at the end: that is the ease curve. The timing function changes this speed curve.

Value	Feels like
`ease`	Slow start, fast middle, slow end (default)
`linear`	Constant speed
`ease-in`	Starts slowly, ends fast
`ease-out`	Starts fast, ends slowly
`ease-in-out`	Slow at both ends
`cubic-bezier(...)`	Your own curve
`steps(4)`	Jumps in four steps

index.html

HTML

<style>
  .track { background: #eee; margin: 6px 0; width: 100%; }
  .dot { width: 34px; height: 34px; background: #d94a00; border-radius: 50%; transition: transform 2s; }
  .wrap:hover .dot { transform: translateX(260px); }
  .a { transition-timing-function: linear; }
  .b { transition-timing-function: ease-in; }
  .c { transition-timing-function: ease-out; }
</style>
<div class="wrap">
  <p style="margin:4px 0">Hover over this area. linear / ease-in / ease-out:</p>
  <div class="track"><div class="dot a"></div></div>
  <div class="track"><div class="dot b"></div></div>
  <div class="track"><div class="dot c"></div></div>
</div>

Compare how each dot speeds up or slows down along the way.

For UI elements ease-out is a good default for things appearing, since it reacts instantly and settles. ease-in suits things leaving.

transition-delay

Waits before starting.

index.html

HTML

<style>
  .item { display: inline-block; width: 60px; height: 60px; background: #1a5276; margin: 4px; transition: background 0.4s; }
  .row:hover .item { background: #d94a00; }
  .item:nth-child(2) { transition-delay: 0.15s; }
  .item:nth-child(3) { transition-delay: 0.3s; }
</style>
<div class="row"><span class="item"></span><span class="item"></span><span class="item"></span></div>

The squares change in a staggered wave. Hover over the row.

The full shorthand

Order: property duration timing-function delay.

style.css

PHP

transition: transform 0.3s ease-out 0.1s;

The first time value is the duration, the second is the delay.

warning

Delays on hover-out

A delay on the normal state also delays the way back. A menu that waits half a second before closing feels broken. Use delays sparingly, and set a short or no delay on the return transition.