Sunny Books
What we have

CSS3 transitions timing functions & delays

Timing functoins and delay are two properties of CSS3 transitions. Using these two properties creatively can build web element effect very attractive. The syntax for a CSS3 transition is:


CSS3 transition timing functions

The transition timing function property is used to specify how the pace of the transition changes over its duration. This can be done in one of two ways. Either by specifying a number of pre-defined keywords (ease, linear, ease-in, ease-out or ease-in-out), or by defining a custom timing function (by specifying four coordinates to define a cubic bezier curve).

When specifying timing functions by ourselves, we can use Ceaser CSS Easing Tool.


Ease in
Ease out
Ease in out

Hover on me

CSS3 transition delays

The transition delay property accepts a comma-separated list of times, specified in seconds or milliseconds, which in this case determines the length of time between the transition being triggered and the transition starting. The default value is 0, ie. the transition will commence as soon as triggered.

Negative values are accepted for transition-delay. When supplied the transition will commence as soon as triggered, however it will appear to have begun execution at the specified offset, ie; the transition effect will begin part-way through its cycle (see the examples section below for an example).


Hover on me