animationTimingFunction Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:animationTimingFunction


The animationTimingFunction sets the speed curve of the animation.

Property Values

linear The animation has the same speed from start to end
ease Default value. 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 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.

Technical Details

Item Value
Default Value: ease
Return Value: A String, representing the animation-timing-function property of an element
CSS VersionCSS3

The following code shows how to change the animationTimingFunction property of a <div> element:

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>
div {// w w  w  .ja  va2 s .  co  m
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: mymove 2s infinite;
    -webkit-animation: mymove 2s infinite;  /* Chrome, Safari, Opera */

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}

@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}

<button onclick="myFunction()">Test</button>

function myFunction() {
    document.getElementById("myDIV").style.WebkitAnimationTimingFunction = "linear";  // Code for Chrome, Safari, and Opera
    document.getElementById("myDIV").style.animationTimingFunction = "linear";

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


Related Tutorials