/

HTML / CSS / JavaScript Tutorial

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">&nbsp;</div><br><br>
2. Element set using JavaScript<br>
<div id="x2">&nbsp;</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


Desktop view | Switch to Mobile