animation-timing-function

osbo.com | CSS | Properties | animation-timing-function

The animation-timing-function CSS property describes how the animation will progress between each pair of keyframes.

animation-timing-function: value;

object.style.animationTimingFunction = "value";

<'animation-timing-function'> = <easing-function>#

<easing-function> = linear | <cubic-bezier-easing-function> | <step-easing-function>

linear

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>)

ease

Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).

ease-in

Equivalent to cubic-bezier(0.42, 0, 1, 1).

ease-out

Equivalent to cubic-bezier(0, 0, 0.58, 1).

ease-in-out

Equivalent to cubic-bezier(0.42, 0, 0.58, 1).

cubic-bezier()

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.

<number>

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>]?)

step-start

Computes to steps(1, start)

step-end

Computes to steps(1, end)

steps()

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.

<integer>

Specifies one or more decimal digits (0-9).

<step-position> = jump-start | jump-end | jump-none | jump-both | start | end

jump-start

The first rise occurs at input progress value of 0.

jump-end

The last rise occurs at input progress value of 1.

jump-none

All rises occur within the range (0, 1).

jump-both

The first rise occurs at input progress value of 0 and the last rise occurs at input progress value of 1.

start

Behaves as jump-start.

end

Behaves as jump-end.

ease

<!doctype html>
<html>
<head>
    <style>
        @keyframes mykeyframes {
            0% {
                margin-left: 0;
            }
            100% {
                margin-left: 200px;
            }
        }
        p {
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-name: mykeyframes;
        }
    </style>
    <script>
        function mouseover(value) {
            document.getElementsByTagName("p")[0].style.animationTimingFunction = value;
        }
    </script>
</head>
<body>
    <button onmouseover="mouseover(value)" value="cubic-bezier(0, 0, 1, 1)">cubic-bezier</button>
    <input onmouseover="mouseover(value)" type="button" value="ease">
    <input onmouseover="mouseover(value)" type="button" value="ease-in">
    <input onmouseover="mouseover(value)" type="button" value="ease-in-out">    
    <input onmouseover="mouseover(value)" type="button" value="ease-out"><br>
    <input onmouseover="mouseover(value)" type="button" value="linear"><br>
    <button onmouseover="mouseover(value)" value="steps(4, end)">end</button>
    <button onmouseover="mouseover(value)" value="steps(4, jump-both)">jump-both</button>
    <button onmouseover="mouseover(value)" value="steps(4, jump-end)">jump-end</button>
    <button onmouseover="mouseover(value)" value="steps(4, jump-none)">jump-none</button>
    <button onmouseover="mouseover(value)" value="steps(4, jump-start)">jump-start</button>
    <button onmouseover="mouseover(value)" value="steps(4, start)">start</button>
    <input onmouseover="mouseover(value)" type="button" value="step-end">
    <input onmouseover="mouseover(value)" type="button" value="step-start">
    <p>animation-timing-function</p>
</body>
</html>

<!doctype html>
<html>
<head>
    <style>
        @keyframes mykeyframes {
            0% {
                margin-left: 0;
            }
            100% {
                margin-left: 200px;
            }
        }
        p {
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-name: mykeyframes;
        }
    </style>
    <script>
        onload = function() {
            var elements = document.getElementsByTagName("p");
            for (var i = 0; i < elements.length; ++i) {
                elements[i].style.animationTimingFunction = elements[i].innerHTML;
            }
        }
    </script>
</head>
<body>
    <p>cubic-bezier(0, 0, 1, 1)</p>
    <p>ease</p>
    <p>ease-in</p>
    <p>ease-in-out</p>    
    <p>ease-out</p>
    <p>linear</p>
    <p>steps(4, end)</p>
    <p>steps(4, jump-both)</p>
    <p>steps(4, jump-end)</p>
    <p>steps(4, jump-none)</p>
    <p>steps(4, jump-start)</p>
    <p>steps(4, start)</p>
    <p>step-end</p>
    <p>step-start</p>
</body>
</html>

animation-iteration-count

animation-name

animation-play-state

World Wide Web Consortium (W3C)