Javascript DOM CSS Style animationTimingFunction Property

Introduction

Changing the animationTimingFunction property of a <div> element: 

document.getElementById("myDIV").style.animationTimingFunction = "linear";

Click the button to change the timing-function of the animation:

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {// ww w .j  a  v a2s  .  c  om
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 2s infinite;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}
</style>
</head>
<body>
<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
  document.getElementById("myDIV").style.animationTimingFunction = "linear";
}
</script>

<div id="myDIV"></div>

</body>
</html>

The animationTimingFunction specifies the speed curve of the animation.

The speed curve defines how values of an animation is changing.

The speed curve is used to make the changes smoothly.

Property Values

Value
 Description
linear
 The animation has the same speed from start to end
ease
 Default. The animation has a slow start, then fast, before it ends slowly
ease-in
 a slow start
ease-out
 a slow end
ease-in-out
 both a slow start and a slow end
cubic-bezier(n, n, n, n)

 Define your own values in the cubic-bezier function
Possible values are numeric values from 0 to 1
initial
 Sets this property to its default value.
inherit
 Inherits this property from its parent element.

The animationTimingFunction returns a String representing the animation-timing-function property of an element.




PreviousNext

Related