CSS Property: animation-timing-function
[this page | pdf | back links]
The CSS (CSS3) animation-timing-function property specifies
the speed curve of an animation. The speed curve is defined by a cubic Bezier
curve.
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
|
|
ease-in
|
Slow start
|
|
ease-out
|
Slow end
|
|
ease-in-out
|
Slow start and end
|
|
linear
|
Animation has same
speed throughout its life
|
|
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.animationTimingFunction="linear"
|
|
Inherited:
|
No
|
|
Animatable:
|
No
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div {width: 100px; height: 40px; position: relative;
background: yellow; animation: anim 2s infinite;}
div.x1 {animation-timing-function: ease-in-out;}
@keyframes anim {from {left: 0px} to {left: 50px;} }
</style>
</head>
<body>
1. Element set using in-file HTML style<br>
<div class="x1"> </div><br><br>
2. Element set using JavaScript<br>
<div id="x2"> </div>
<script>
document.getElementById("x2").style.animationPlayState = "linear";
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyAnimationTimingFunction() {
var x = document.createElement("DIV"); x.style.animationTimingFunction = "linear"; return (window.getComputedStyle(x, null).animationTimingFunction == "linear");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties