animation-timing-function - HTML CSS CSS Property

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

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

Description

The animation-timing-function CSS property sets how animation should progress.

The following table summarizes the animation-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: 

animation-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
linearanimation goes from its initial state to its final state with a constant speed.
ease Similar to ease-in-out.
ease-in begins slowly, then progressively accelerates.
ease-out starts quickly then slow progressively down.
ease-in-out starts slowly, accelerates then slows down.
cubic-bezier(n,n,n,n) Defines a cubic Bezier 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 animation-timing-function property.

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

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 animation-timing-function Property</title>
  <style type="text/css">
.box {<!-- www  .j a v  a  2s  . c o m-->
    width: 153px;
    height: 103px;
  margin: 50px;
    background: url("https://www.java2s.com/style/demo/Opera.png") no-repeat;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: ease-in;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 2s;
    animation-timing-function: ease-in;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
</style>
 </head>
 <body>
  <div class="box"></div>
 </body>
</html>

Related Tutorials