animationTimingFunction Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:animationTimingFunction

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. animationTimingFunction

Description

The animationTimingFunction sets the speed curve of the animation.

Property Values

ValueDescription
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>
<html>
<head>
<style>
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;}
}
</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>

Related Tutorials