The animationTimingFunction
gets and sets the speed curve of the animation.
Return the animationTimingFunction property:
var v = object.style.animationTimingFunction
Set the animationTimingFunction property:
object.style.animationTimingFunction=linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n)
linear
animation has the same speed from start to end
ease(Default value)
The animation has a slow start, then fast, ends slowly
ease-in
The animation has a slow start
ease-out
The animation has a slow end
ease-in-out
animation has both a slow start and a slow end
cubic-bezier(n,n,n,n)
Define speend function in the cubic-bezier function. Possible values are numeric values from 0 to 1.
Default Value: | ease |
---|---|
Return Value: | A string representing the animation-timing-function property |
CSS Version | CSS3 |
The following code shows how to changing the animationTimingFunction property.
<!DOCTYPE html>
<html>
<head>
<style>
div {<!-- w ww . j av a2s. c o m-->
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 2s infinite;
-webkit-animation: mymove 2s 1; /* Chrome, Safari, Opera */
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
document.getElementById("myDIV").style.WebkitAnimationTimingFunction = "linear"; // Code for Chrome, Safari, and Opera
document.getElementById("myDIV").style.animationTimingFunction = "linear";
}
</script>
<div id="myDIV"></div>
</body>
</html>