transition · Properties · CSS

The transition CSS property is shorthand for transition-property, transition-duration, transition-timing-function, and transition-delay.

Syntax

CSS

transition: value;

JS

object.style.transition = "value";

Values

<'transition'> = <single-transition>#

<single-transition> = [ none | <single-transition-property> ] || <time> || <easing-function> || <time>

none

No property will transition.

<single-transition-property> = all | <custom-ident>

all

Indicates all properties are to be transitioned.

<custom-ident>

Specifies any valid identifier that is not misinterpreted as a keyword.

<time>

Defines how long of a delay there is between the start of the animation and when it begins executing.

ms

Milliseconds. There are 1000 milliseconds in 1 second.

Seconds.

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

Examples

1 · transition-property · all

2 · transition-property · custom-ident

3 · transition-property · none

4 · transition-property · JS · Inline

5 · transition-property · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        p
        {
            background-color: yellow;
            transition-duration: 1s;
            width: 100%;
        }
        p:hover
        {
            background-color: red;
            width: 50%;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>all</button>
    <button value="width">custom-ident</button>
    <button>none</button>
    <p>transition-property</p>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("p").style.transition = myparameter + " 1s";
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            let myargument = myelement.innerHTML;
            if(myelement.value)
            {
                myargument = myelement.value;
            }
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>

6 · transition-duration · time

7 · transition-duration · JS · Inline

8 · transition-duration · JS · Internal

9 · transition-timing-function · linear

10 · transition-timing-function · cubic-bezier-easing-function · ease

11 · transition-timing-function · cubic-bezier-easing-function · ease-in

12 · transition-timing-function · cubic-bezier-easing-function · ease-out

13 · transition-timing-function · cubic-bezier-easing-function · ease-in-out

14 · transition-timing-function · cubic-bezier-easing-function · cubic-bezier

15 · transition-timing-function · step-easing-function · step-start

16 · transition-timing-function · step-easing-function · step-end

17 · transition-timing-function · step-easing-function · step-position · jump-start

18 · transition-timing-function · step-easing-function · step-position · jump-end

19 · transition-timing-function · step-easing-function · step-position · jump-none

20 · transition-timing-function · step-easing-function · step-position · jump-both

21 · transition-timing-function · step-easing-function · step-position · start

22 · transition-timing-function · step-easing-function · step-position · end

23 · transition-timing-function · JS · Inline

<!doctype html>
<html>
<head>
    <style>
        p
        {
            background-color: yellow;
            transition-duration: 1s;
            width: 100%;
        }
        p:hover
        {
            width: 50%;
        }
    </style>
</head>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button><br>
    <button onmouseover="myfunction(innerHTML)">linear</button><br>
    <button onmouseover="myfunction(innerHTML)">ease</button>
    <button onmouseover="myfunction(innerHTML)">ease-in</button>
    <button onmouseover="myfunction(innerHTML)">ease-out</button>
    <button onmouseover="myfunction(innerHTML)">ease-in-out</button>
    <button onmouseover="myfunction(value)" value="cubic-bezier(0, 0, 1, 1)">cubic-bezier</button><br>
    <button onmouseover="myfunction(innerHTML)">step-start</button>
    <button onmouseover="myfunction(innerHTML)">step-end</button><br>
    <button onmouseover="myfunction(value)" value="steps(4, jump-start)">jump-start</button>
    <button onmouseover="myfunction(value)" value="steps(4, jump-end)">jump-end</button>
    <button onmouseover="myfunction(value)" value="steps(4, jump-none)">jump-none</button>
    <button onmouseover="myfunction(value)" value="steps(4, jump-both)">jump-both</button>
    <button onmouseover="myfunction(value)" value="steps(4, start)">start</button>
    <button onmouseover="myfunction(value)" value="steps(4, end)">end</button>
    <p>transition</p>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("p").style.transition = "1s " + myparameter;
        }
    </script>
</body>
</html>

24 · transition-timing-function · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        p
        {
            background-color: yellow;
            transition-duration: 1s;
            width: 100%;
        }
        p:hover
        {
            width: 50%;
        }
    </style>
</head>
<body>
    <button>initial</button><br>
    <button>linear</button><br>
    <button>ease</button>
    <button>ease-in</button>
    <button>ease-out</button>
    <button>ease-in-out</button>
    <button value="cubic-bezier(0, 0, 1, 1)">cubic-bezier</button><br>
    <button>step-start</button>
    <button>step-end</button><br>
    <button value="steps(4, jump-start)">jump-start</button>
    <button value="steps(4, jump-end)">jump-end</button>
    <button value="steps(4, jump-none)">jump-none</button>
    <button value="steps(4, jump-both)">jump-both</button>
    <button value="steps(4, start)">start</button>
    <button value="steps(4, end)">end</button>
    <p>transition</p>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("p").style.transition = "1s " + myparameter;
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            let myargument = myelement.innerHTML;
            if(myelement.value)
            {
                myargument = myelement.value;
            }
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>