transition-timing-function - HTML CSS CSS Property

HTML CSS examples for CSS Property:transition-timing-function

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. transition-timing-function

Description

The transition-timing-function CSS property sets how the intermediate values of a transition are calculated.

The following table summarizes the transition-timing-function Property.

Item Value
Default value: ease
Applies to:All elements, ::before and ::after pseudo-elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


transition-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit

Property Values

The following table describes the values of this property.

ValueDescription
lineartransition goes in a constant speed.
ease Similar to ease-in-out, it accelerates more sharply at the beginning and slow down near the middle of it.
ease-in begins slowly, then progressively accelerates and the transition stops abruptly.
ease-out starts quickly then slow progressively down when approaching to its final state.
ease-in-out starts slowly, accelerates then slows down when approaching its final state.
cubic-bezier(n,n,n,n) Defines a cubic Bezier curve. It is also known as speed curve. Possible values are numeric values from 0 to 1.
initial Sets this property to its default value.
inherit take the value of its parent element transition-timing-function property.

The example below shows the transition-timing-function property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 transition-timing-function Property</title>
  <style type="text/css">
    button {<!--from   w  ww.jav a 2 s  .  c  o m-->
        font-size: 16px;
        font-weight: bold;
        padding: 10px 20px;
    background: #fe9854;
        border: 3px solid #dc5801;
    /* For Safari 3.0+ */
    -webkit-transition-property: background, border;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: linear;
    /* Standard syntax */
    transition-property: background, border;
    transition-duration: 2s;
    transition-timing-function: linear;
  }
  button:hover {
    background: #48c677;
    border-color: #257644;
  }
</style>
 </head>
 <body>
  <button type="button">Place mouse on me</button>
 </body>
</html>

Related Tutorials