CSS animation-timing-function Property

❮ Previous Reference Next ❯

Example

div {
  animation-timing-function: ease-in;
}
Try this code ❯






Meaning

The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle.

Default value:ease
Inherited:No
Animatable:No
Version:CSS3
JavaScript syntax:
object.style.animationTimingFunction="linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|steps(n, jumpterm)|initial|inherit|revert|revert-layer|unset";


Standard Syntax

animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|steps(n, jumpterm)|initial|inherit|revert|revert-layer|unset;


Browser Support

The numbers in the table specify the first browser version that fully supports the property.



Status





Property Values

The following table describes the values of this property.

Value Description
linear The animation has the same speed from start to end.
ease Default value. The animation has a slow start, then fast, before it ends slowly.
ease-in The animation start slowly.
ease-out The animation ends slowly.
ease-in-out The animation has slow start and a slow end
step-start Equivalent to steps(1, start)
step-end Equivalent to steps(1, end)
steps(int,start|end) Displays an animation iteration along n stops along the transition, displaying each stop for equal lengths of time.
cubic-bezier(n,n,n,n) Specifies your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1.
steps(n, jumpterm) Displays an animation iteration along n stops along the transition, displaying each stop for equal lengths of time.
For example - If n is 5, there are 5 steps. Whether the animation holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and 100%, or makes 5 stops between the 0% and 100% along the animation, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%, 75%, and 100%) depends on which of the following jump terms is used:

  • jump-start - Denotes a left-continuous function, so that the first jump happens when the animation begins.
  • jump-end - Denotes a right-continuous function, so that the last jump happens when the animation ends.
  • jump-none - There is no jump on either end. Instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration.
  • jump-both - Includes pauses at both the 0% and 100% marks, effectively adding a step during the animation iteration.
  • start - Same as jump-start.
  • end -Same as jump-end.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.


Default CSS Property Values

selectors {
  animation-timing-function: ease;
}
❮ Previous Reference Next ❯