The animation-timing-function CSS property describes how the animation will progress between each pair of keyframes.
object.style.animationTimingFunction = "value";
<'animation-timing-function'> = <easing-function>#
<easing-function> = linear | <cubic-bezier-easing-function> | <step-easing-function>
Its output progress value is equal to the input progress value for all inputs.
<cubic-bezier-easing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
Equivalent to cubic-bezier(0.42, 0, 1, 1).
Equivalent to cubic-bezier(0, 0, 0.58, 1).
Equivalent to cubic-bezier(0.42, 0, 0.58, 1).
Specifies a cubic Bezier easing function. The four numbers specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid.
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<step-easing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)
Computes to steps(1, start)
Computes to steps(1, end)
The first parameter specifies the number of intervals in the function. It must be a positive integer greater than 0 unless the second parameter is jump-none in which case it must be a positive integer greater than 1. The second parameter, which is optional, specifies the step position.
Specifies one or more decimal digits (0-9).
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end
The first rise occurs at input progress value of 0.
The last rise occurs at input progress value of 1.
All rises occur within the range (0, 1).
The first rise occurs at input progress value of 0 and the last rise occurs at input progress value of 1.
Behaves as jump-start.
Behaves as jump-end.
cubic-bezier-easing-function | cubic-bezier
cubic-bezier-easing-function | ease
cubic-bezier-easing-function | ease-in
cubic-bezier-easing-function | ease-in-out
cubic-bezier-easing-function | ease-out
step-easing-function | end
step-easing-function | jump-both
step-easing-function | jump-end
step-easing-function | jump-none
step-easing-function | jump-start
step-easing-function | start
step-easing-function | step-end
step-easing-function | step-start
© 2021 Osbo Design