CSS Property: transition-timing-function
[this page | pdf | back links]
The CSS (CSS3) transition-timing-function property identifies
the speed curve used for a transition effect.
Valid property values
(other than inherit
and initial) are:
|
Value
|
Description
|
|
cubic-bezier(x1, x2, x3, x4)
|
As defined by cubic
Bezier function with parameters x1, x2, x3, x4
(possible values of each are numerical values from 0 to 1)
|
|
ease
|
(default value). Slow
start, then fast, before ending slowly, equivalent to
cubic-bezier(0.25,0.1,0.25,1)
|
|
ease-in
|
Slow start, equivalent
to cubic-bezier(0.42,0,1,1)
|
|
ease-out
|
Slow end, equivalent to
cubic-bezier(0,0,0.58,1)
|
|
ease-in-out
|
Slow start and end,
equivalent to cubic-bezier(0.42,0,0.58,1)
|
|
step-start
|
Equivalent to steps(1, start)
|
|
step-end
|
Equivalent to steps(1, end)
|
|
steps(int, start|end)
|
A stepping function
with two parameters. The first parameter specifies the number of intervals in
the function (and must be a positive integer, i.e. greater than zero). The
second (optional) parameter specifies when the change of values occurs and is
either start or end (if omitted is given the value end)
|
|
Default Value:
|
ease
|
|
JavaScript syntax:
|
e.g. object.style.transitionTimingFunction="linear"
|
|
Inherited:
|
No
|
|
Animatable:
|
No
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
p {width: 200px; border: 2px solid green; transition: width 5s;}
p.x1 {transition-timing-function: linear}
p:hover {width: 300px;}
</style>
</head>
<body>
Hover over element to see transition effect
<p>Element with default property</p>
<p class="x1">Property set using HTML</p>
<p id="x2">Property set using JavaScript</p>
<script>
document.getElementById("x2").style.transitionTimingFunction = "linear";
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyTransitionTimingFunction() {
var x = document.createElement("DIV"); x.style.transitionTimingFunction = "linear"; return (window.getComputedStyle(x, null).transitionTimingFunction == "linear");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties