Animation-timing-function - Property CSS

Syntax diagram of animation-timing-function.

Description of the animation-timing-function property.

Defines the dynamics of the animation. For example, the animation can start slowly and end quickly, or vice versa, or, on the contrary, proceed at a constant speed.

Note: animation-timing-function can also be used as a descriptor in the syntax of @keyframes, which allows defining a different dynamic for each segment of the animation.

For a general overview of animations, refer to the page describing animations in CSS.

Values for animation-timing-function.

• animation-timing-function: ease;

  Default value. The animation starts slowly, gradually speeds up, reaches its normal speed, and slows down before finishing.
• animation-timing-function: ease-in;

  The animation starts slowly until it reaches its normal speed, then maintains a constant speed until the end.
• animation-timing-function: ease-out;

  The animation starts at its normal speed and slows down before finishing.
• animation-timing-function: ease-in-out;

  The animation starts and ends slowly.
• animation-timing-function: linear; animation-timing-function: linear(0, 0.75, 1);

  With the linear value, the animation speed is constant throughout its duration.

  But the linear() function now allows you to specify parameters and define multiple line segments. The value linear is a shortcut for linear(0, 1). Refer to the linear() function for more details.
• animation-timing-function: steps(9 end); n f

  The animation is played in jumps, here in 9 steps. A second parameter f can be specified. It determines which of the steps will be invisible (execution time at 0). By default, it is the last one.
  Note the values step-start and step-end, which are shorthand syntaxes equivalent to steps(1,start) and steps(1,end), respectively.
  Refer to the description of the steps() function for more details.
• animation-timing-function: cubic-bezier(n,n,n,n);

  Defines a Bézier curve from 4 numerical values. The animation speed will follow this curve.
  See a more complete description of the function cubic-bezier().
• animation-timing-function: linear, ease-in, ...;

  As with other properties related to animations, it is possible to define a series of comma-separated values in case multiple animations have been defined.
  For more details on multiple animations, see the page animations multiples.

• @keyframes demo { from { width: 0px; animation-timing-function: linear; } 50% { width: 50%; animation-timing-function: steps(10); } to { width: 100%; } }

  Finally, to conclude, here is an example of using animation-timing-function as a descriptor for @keyframes. In this case, the descriptor takes priority over the property for the segments where it is defined.

  Pour davantage de précisions, reportez-vous à la page sur @keyframes
• animation-timing-function: initial; (ease) animation-timing-function: inherit; animation-timing-function: revert; animation-timing-function: revertLayer; animation-timing-function: unset;

  Links to the presentation of these values: initial, inherit, revert, revert-layer, unset.

Note on cubic-bezier(n,n,n,n).

This syntax allows you to adjust the speed and acceleration of the animation very precisely to achieve a more realistic movement, but the 4 numerical values are not easy to determine.

Refer to this tool, particularly useful, to calculate these parameters: Bezier curve designer.

Manipulating the animation-timing-function property programmatically.

Change the value of animation-timing-function in Javascript.

We see that Javascript offers a syntax with the typical CSS notation, in kebab-case (a hyphen to separate words), and another syntax with a more common notation in JS: camel-case (a capital letter to separate words).

let el = document.getElementById('id'); el.style['animation-timing-function'] = 'ease-in-out'; // or let el = document.getElementById('id'); el.style.animationTimingFunction = 'ease-in-out';

Read the value of animation-timing-function in JavaScript.

The code below returns the value of animation-timing-function that was set in HTML by the style attribute. The value possibly set via a CSS elector is not returned.

let el = document.getElementById('id'); let value = el.style['animation-timing-function']; // or let el = document.getElementById('id'); let value = el.style.animationTimingFunction;

Read the computed value of animation-timing-function in JavaScript.

The computed value can be the one defined on the element itself, or a value inherited through the usual inheritance mechanism. Failing that, it will be the initial value of the property (ease in the case of animation-timing-function), but the calculated value is always defined.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('animation-timing-function');

Change the value of the animation-timing-function property with JQuery.


$('#id').css('animation-timing-function', 'ease-in-out');
// or
$('#id').css('animationTimingFunction', 'ease-in-out');


Read the computed value of the animation-timing-function property with JQuery.

let value = $('#id').css('animation-timing-function');

Other code examples.

Other examples of Javascript and JQuery code are provided on the page Javascript and CSS.

Test it yourself.

The buttons below apply the entered value to the animation-timing-function property and then display either the value as it was applied, or the calculated value. This second option allows you to see how the value of animation-timing-function is stored (serialized).

Simulator.

The simulator changes the animation-timing-function property of the blue block. The gray block is animated for comparison with the linear value.

Browsers compatibility with animation-timing-function.

Very good support by current browsers.

1

Animation
support

2

animation-timing-function
property

3

jump
value

Estimated overall support.

97%

96%

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Historic of the animation-timing-function property.

• CSS Animations Level 1

  First presentation of animations in CSS, and the corresponding properties.
  

  March 20, 2009

  Working Draft.

  

  

  

• CSS Easing Functions Level 1

  Description of the different animation dynamics: linear, ease, etc.
  

  February 21, 2017

  Working Draft.

  

  April 30, 2019

  Candidate Recommendation.

  

  

• CSS Animations Level 2

  No change to the animation-timing-function property.
  

  March 02, 2023

  Working Draft.

  

  

  

• CSS Easing Functions Level 2

  No change regarding animation dynamics.
  

  August 29, 2024

  Working Draft.

  

  

  

See also, regarding the animations.

The CSS standard is divided into modules, each of which evolves at its own pace (level 1, level 2, etc.). Animations are described in the CSS Animations module. You will also find the definition of the following terms there:

Properties:

At-rules:

Functions:

cubic-bezier()

Determines, from 4 parameters, a non-linear progression for animations.

linear()

Defines a linear acceleration function, usable for animations with animation-timing-function.

Steps()

This is an easing function, which defines a jerky progression, step by step.