CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES
Advertisements

CSS3 animation-timing-function Property

Topic: CSS3 Properties ReferencePrev|Next

Description

The animation-timing-function CSS property specifies how a CSS animation should progress over the duration of each cycle.

The following table summarizes the usages context and the version history of this property.

Default value: ease
Applies to: All elements, ::before and ::after pseudo-elements
Inherited: No
Animatable: No. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

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

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

.box {
    width: 50px;
    height: 50px;
    background: red;
    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%;}
}

Property Values

The following table describes the values of this property.

Value Description
linear Specifies that the animation goes from its initial state to its final state, with a constant speed.
ease Similar to ease-in-out, though it accelerates more sharply at the beginning and the acceleration already starts to slow down near the middle of it.
ease-in Specifies that the animation begins slowly, then progressively accelerates until the final state is reached and the animation stops abruptly.
ease-out Specifies that the animation starts quickly then slow progressively down when approaching to its final state.
ease-in-out Specifies that the animation 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 If specified, the associated element takes the computed value of its parent element animation-timing-function property.

Browser Compatibility

The animation-timing-function property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 5+ -moz-, 15+
  • Google Chrome 4+ -webkit-
  • Internet Explorer 10+
  • Apple Safari 4+ -webkit-
  • Opera 12+ -o-, 15+ -webkit-

Further Reading

See tutorial on: CSS3 Animations.

Related properties and at-rules: animation, animation-name, animation-duration, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, @keyframes.

Advertisements
Bootstrap UI Design Templates

Your Feedback:

We would love to hear from you, please drop us a line.