Jobs Hub

Menu

CSS animation-timing-function

The CSS animation-timing-function property is used when we need to create smooth animation. That is, it defines the way to process an animation during the specified animation time duration. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #mydivone, #mydivtwo {width: 50px; height: 50px; border-radius: 50%;
         background-color: maroon; position: relative;
         animation-name: fresherearth; animation-duration: 2s; animation-iteration-count: infinite;}
      @keyframes fresherearth {
         from {top: 0px; left: 0px;}
         to {top: 0px; left: 220px;}
      }
      #mydivtwo{animation-timing-function: ease-in;}
   </style>
</head>
<body>

   <div id="mydivone"></div>
   <br/>
   <div id="mydivtwo"></div>
   
</body>
</html>

Output

In above example, the animation-timing-function property with ease-in value is defined for the second circle.

The animation-timing-function defines the speed curve of an animation in CSS.

Note - The animation-name is used to define a name for an animation.

Note - The animation-duration is used to define time to complete one iteration or cycle of an animation.

Note - The animation-iteration-count is used to define the total number of iterations or cycles for an animation to play.

Note - The @keyframes is used to define the change in styles for multiple times in one cycle of selected animation.

CSS animation-timing-function Syntax

The syntax of animation-timing-function property in CSS, is:

animation-timing-function: x;

The value of x should be any of the following:

linear - used to apply same speed curve to an animation, from start to end
ease - used to start the animation slowly, then fast, then ends slowly. This is the default value
ease-in - used to define slow start to an animation
ease-out - used to define slow end to an animation
ease-in-out - used to define slow start and end to an animation
steps(int, start|end) - used to animate in intervals as defined using the int (a number greater than 0) parameter. The second parameter is optional. The default value of second parameter is end.
step-start - used when we need to apply the final style. In place of step-start, we can also use steps(1, start)
step-end - used when we need to apply the initial style. In place of step-end, we can also use steps(1, end)
cubic-bezier(v, v, v, v) - used to apply completely custom speed curve for an animation. v refers to a number from 0 to 1 including negative values. The first and last values are starting and ending point of the Cubic Bezier curve.
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS animation-timing-function Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #a, #b, #c, #d, #e, #f, #g, #h, #i, #j, #k, #l {width: 50px; height: 50px; border-radius: 50%;
         background-color: maroon; position: relative;
         animation-name: fresherearth; animation-duration: 2s; animation-iteration-count: infinite;}
      @keyframes fresherearth {
         from {top: 0px; left: 0px;}
         to {top: 0px; left: 220px; background-color: blue;}
      }
      #b{animation-timing-function: linear;}
      #c{animation-timing-function: ease;}
      #d{animation-timing-function: ease-in;}
      #e{animation-timing-function: ease-out;}
      #f{animation-timing-function: ease-in-out;}
      #g{animation-timing-function: step-start;}
      #h{animation-timing-function: step-end;}
      #i{animation-timing-function: steps(10, start);}
      #j{animation-timing-function: steps(30, start);}
      #k{animation-timing-function: steps(10, end);}
      #l{animation-timing-function: steps(30, end);}
   </style>
</head>
<body>

   <h2>Without animation-timing-function</h2>
   <div id="a"></div>

   <h2>animation-timing-function: linear</h2>
   <div id="b"></div>

   <h2>animation-timing-function: ease</h2>
   <div id="c"></div>

   <h2>animation-timing-function: ease-in</h2>
   <div id="d"></div>

   <h2>animation-timing-function: ease-out</h2>
   <div id="e"></div>

   <h2>animation-timing-function: ease-in-out</h2>
   <div id="f"></div>

   <h2>animation-timing-function: step-start</h2>
   <div id="g"></div>

   <h2>animation-timing-function: step-end</h2>
   <div id="h"></div>
   
   <h2>animation-timing-function: steps(10, start)</h2>
   <div id="i"></div>

   <h2>animation-timing-function: steps(30, start)</h2>
   <div id="j"></div>

   <h2>animation-timing-function: steps(10, end)</h2>
   <div id="k"></div>

   <h2>animation-timing-function: steps(30, end)</h2>
   <div id="l"></div>
   
</body>
</html>

Output

Without animation-timing-function

animation-timing-function: linear

animation-timing-function: ease

animation-timing-function: ease-in

animation-timing-function: ease-out

animation-timing-function: ease-in-out

animation-timing-function: step-start

animation-timing-function: step-end

animation-timing-function: steps(10, start)

animation-timing-function: steps(30, start)

animation-timing-function: steps(10, end)

animation-timing-function: steps(30, end)

CSS animation-timing-function: cubic-bezier() Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #a, #b, #c, #d, #e, #f{width: 50px; height: 50px; border-radius: 50%;
         background-color: maroon; position: relative;
         animation-name: fresherearth; animation-duration: 2s; animation-iteration-count: infinite;}
      @keyframes fresherearth {
         from {top: 0px; left: 0px;}
         to {top: 0px; left: 220px;}
      }
      #b{animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);}
      #c{animation-timing-function: cubic-bezier(.76,1.9,.87,-0.74);}
      #d{animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);}
      #e{animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);}
      #f{animation-timing-function: cubic-bezier(1, 0, 0, 1);}
   </style>
</head>
<body>

   <h2>Without animation-timing-function</h2>
   <div id="a"></div>

   <h2>animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1)</h2>
   <div id="b"></div>

   <h2>animation-timing-function: cubic-bezier(.76,1.9,.87,-0.74)</h2>
   <div id="c"></div>

   <h2>animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1)</h2>
   <div id="d"></div>

   <h2>animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045)</h2>
   <div id="e"></div>

   <h2>animation-timing-function: cubic-bezier(1, 0, 0, 1)</h2>
   <div id="f"></div>
   
</body>
</html>

Output

Without animation-timing-function

animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1)

animation-timing-function: cubic-bezier(.76,1.9,.87,-0.74)

animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1)

animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045)

animation-timing-function: cubic-bezier(1, 0, 0, 1)

CSS Online Test

« Previous Tutorial Next Tutorial »