- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style animationTimingFunction Property
The animationTimingFunction is used to specify the way animation progresses during its cycle. It does so by setting or returning the speed curve for an animation. The speed curve defines how smooth the transitions will be by specifying the time it takes animation to move from one state to another.
Syntax
Following is the syntax for −
Setting the animationTimingFunction property −
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
Values
Following are the values −
| Sr.No | Values & Description |
|---|---|
| 1 | linear This specifies that the animation has the same speed throughout the course of an animation. |
| 2 | ease This is the default value specifying the animation has a slow start and end but is faster in the middle. |
| 3 | ease-in The animation has a slow start. |
| 4 | ease-out The animation has a slow end. |
| 5 | ease-in-out The animation is slow at the start and also slow at the end. |
| 6 | cubic-bezier(n, n, n,n) Fo defining the cubic-bezier function for your custom values. |
| 7 | initial For setting this property to initial value. |
| 8 | inherit To inherit the parent property value. |
Example
Let us look at the example for the animationTimingFunction property −
<!DOCTYPE html>
<html>
<head>
<style>
#PARA1{
border: 2px solid black;
position: relative;
animation: demo 5s infinite;
animation-timing-function: linear;
}
@keyframes demo {
from {background-color: lightcoral; color:black;}
to {background-color: indigo; color:white;}
}
</style>
<script>
function timingChange(){
document.getElementById("PARA1").style.animationTimingFunction="ease";
document.getElementById("Sample").innerHTML="The animation timing is now set to ease.";
}
</script>
</head>
<body>
<p id="PARA1">
Lacus vel facilisis volutpat est velit. Id interdum velit laoreet id donec ultrices.
Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Viverra nibh cras
pulvinar mattis nunc sed blandit libero.</p>
<p>Click the below button to change the above animation name</p>
<button onclick="timingChange()">CHANGE TIMING</button>
<p id="Sample"></p>
</body>
</html>Output
This will produce the following output −
On clicking the CHANGE TIMING button −
Updated on: 15-Feb-2021
20 Views
Advertisements