transition
The transition CSS property is shorthand for transition-property, transition-duration, transition-timing-function, and transition-delay.
CSS
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.
<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.
transition-property | none
transition-property | all
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition: all 1s;
width: 100%;
}
p:hover {
background-color: red;
width: 50%;
}
</style>
</head>
<body>
<p>all</p>
</body>
</html>
transition-property | custom-ident
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition: width 1s;
width: 100%;
}
p:hover {
background-color: red;
width: 50%;
}
</style>
</head>
<body>
<p>custom-ident</p>
</body>
</html>
transition-duration | time
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition: 1s;
width: 100%;
}
p:hover {
width: 50%;
}
</style>
</head>
<body>
<p>time</p>
</body>
</html>
transition-timing-function | linear
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition: 1s linear;
width: 100%;
}
p:hover {
width: 50%;
}
</style>
</head>
<body>
<p>linear</p>
</body>
</html>
transition-timing-function | cubic-bezier-easing-function | ease
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition: 1s ease;
width: 100%;
}
p:hover {
width: 50%;
}
</style>
</head>
<body>
<p>ease</p>
</body>
</html>
transition-timing-function | cubic-bezier-easing-function | ease-in
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition: 1s ease-in;
width: 100%;
}
p:hover {
width: 50%;
}
</style>
</head>
<body>
<p>ease-in</p>
</body>
</html>
transition-timing-function | cubic-bezier-easing-function | ease-out
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition: 1s ease-out;
width: 100%;
}
p:hover {
width: 50%;
}
</style>
</head>
<body>
<p>ease-out</p>
</body>
</html>
transition-timing-function | cubic-bezier-easing-function | ease-in-out
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition: 1s ease-in-out;
width: 100%;
}
p:hover {
width: 50%;
}
</style>
</head>
<body>
<p>ease-in-out</p>
</body>
</html>
transition-timing-function | cubic-bezier-easing-function | cubic-bezier
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition: 1s cubic-bezier(0, 0, 1, 1);
width: 100%;
}
p:hover {
width: 50%;
}
</style>
</head>
<body>
<p>cubic-bezier</p>
</body>
</html>
transition-timing-function | step-easing-function | step-start
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition: 1s step-start;
width: 100%;
}
p:hover {
width: 50%;
}
</style>
</head>
<body>
<p>step-start</p>
</body>
</html>
transition-timing-function | step-easing-function | step-end
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition: 1s step-end;
width: 100%;
}
p:hover {
width: 50%;
}
</style>
</head>
<body>
<p>step-end</p>
</body>
</html>
transition-timing-function | step-easing-function | step-position | jump-start
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition: 1s steps(4, jump-start);
width: 100%;
}
p:hover {
width: 50%;
}
</style>
</head>
<body>
<p>jump-start</p>
</body>
</html>
transition-timing-function | step-easing-function | step-position | jump-end
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition: 1s steps(4, jump-end);
width: 100%;
}
p:hover {
width: 50%;
}
</style>
</head>
<body>
<p>jump-end</p>
</body>
</html>
transition-timing-function | step-easing-function | step-position | jump-none
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition: 1s steps(4, jump-none);
width: 100%;
}
p:hover {
width: 50%;
}
</style>
</head>
<body>
<p>jump-none</p>
</body>
</html>
transition-timing-function | step-easing-function | step-position | jump-both
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition: 1s steps(4, jump-both);
width: 100%;
}
p:hover {
width: 50%;
}
</style>
</head>
<body>
<p>jump-both</p>
</body>
</html>
transition-timing-function | step-easing-function | step-position | start
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition: 1s steps(4, start);
width: 100%;
}
p:hover {
width: 50%;
}
</style>
</head>
<body>
<p>start</p>
</body>
</html>
transition-timing-function | step-easing-function | step-position | end
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition: 1s steps(4, end);
width: 100%;
}
p:hover {
width: 50%;
}
</style>
</head>
<body>
<p>end</p>
</body>
</html>
transition-delay | time
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition: 1s 1s;
width: 100%;
}
p:hover {
width: 50%;
}
</style>
</head>
<body>
<p>time</p>
</body>
</html>
JS | transition-property
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition-duration: 1s;
width: 100%;
}
p:hover {
background-color: red;
width: 50%;
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("p")[0].style.transition = value + " 1s";
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="none">
<input onmouseover="mouseover(value)" type="button" value="all">
<button onmouseover="mouseover(value)" value="width">custom-ident</button>
<p>transition-property</p>
</body>
</html>
JS | transition-duration
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
width: 100%;
}
p:hover {
width: 50%;
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("p")[0].style.transition = value;
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="initial">
<button onmouseover="mouseover(value)" value="1s">time</button>
<p>transition-duration</p>
</body>
</html>
JS | transition-timing-function
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition-duration: 1s;
width: 100%;
}
p:hover {
width: 50%;
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("p")[0].style.transition = "1s " + value;
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="linear"><br>
<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-out">
<input onmouseover="mouseover(value)" type="button" value="ease-in-out">
<button onmouseover="mouseover(value)" value="cubic-bezier(0, 0, 1, 1)">cubic-bezier</button><br>
<input onmouseover="mouseover(value)" type="button" value="step-start">
<input onmouseover="mouseover(value)" type="button" value="step-end"><br>
<button onmouseover="mouseover(value)" value="steps(4, jump-start)">jump-start</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-both)">jump-both</button>
<button onmouseover="mouseover(value)" value="steps(4, start)">start</button>
<button onmouseover="mouseover(value)" value="steps(4, end)">end</button>
<p>transition</p>
</body>
</html>
JS | transition-timing-function
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition-duration: 1s;
width: 100%;
}
p:hover {
width: 50%;
}
</style>
<script>
onload = function() {
var elements = document.getElementsByTagName("p");
for (var i = 0; i < elements.length; ++i) {
elements[i].style.transition = "1s " + elements[i].innerHTML;
}
}
</script>
</head>
<body>
<p>linear</p>
<p>ease</p>
<p>ease-in</p>
<p>ease-out</p>
<p>ease-in-out</p>
<p>cubic-bezier(0, 0, 1, 1)</p>
<p>step-start</p>
<p>step-end</p>
<p>steps(4, jump-start)</p>
<p>steps(4, jump-end)</p>
<p>steps(4, jump-none)</p>
<p>steps(4, jump-both)</p>
<p>steps(4, start)</p>
<p>steps(4, end)</p>
</body>
</html>
JS | transition-delay
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
transition-duration: 1s;
width: 100%;
}
p:hover {
width: 50%;
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("p")[0].style.transition = "1s " + value;
}
</script>
</head>
<body>
<button onmouseover="mouseover(value)" value="0s">initial</button>
<button onmouseover="mouseover(value)" value="1s">time</button>
<p>transition-delay</p>
</body>
</html>
Internal
External