CSS transition-timing-function

The CSS transition-timing-function property describes how the intermediate values used during a transition will be calculated. In order words it describes transition effects like ease, linear, etc.

CSS property transition-timing-function

Example – transition-timing-function

<style type="text/css">
div {
 width: 100px;
 background-color: lightblue;
 transition-property: width;
 transition-duration: 2s;
 transition-timing-function: ease;
}
div:hover {
 width: 200px;
}
</style>

<div>
  Hover me to see transition of width
</div>

Related

• CSS transition - animation effect when properties change
• CSS transition-property
• CSS transition-duration
• CSS transition-delay

Specification and Browser compatibility