CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES
SPONSORED LINKS

CSS3 animation-timing-function Property

Topic: CSS3 Properties Reference« Prev|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.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.