HTML | DOM Style transitionTimingFunction property
The DOM Style transitionTimingFunction property allows a transition effect to change speed over its duration. Transition effect provides a way to control animation speed when changing properties.
Syntax:
- To set the property:
object.style.transitionTimingFunction = "ease|linear|ease-in| ease-out|ease-in-out"
- To get the property:
object.style.transitionTimingFunction
Return Values: It returns a string that represents the transition-timing-function property of an element
Property Values:
- ease: Specifies a transition effect that starts slowly, then fast, then slow.
- linear: Specifies a transition effect with the same speed from start to end.
- ease-in: Specifies a transition effect with a slow start.
- ease-out: Specifies a transition effect with a slow end.
- ease-in-out: Specifies a transition effect with a slow start and end.
Example 1: This example describes linear property value.
html
<!DOCTYPE html> < html > < head > < title > HTML | DOM Style transitionTimingFunction property </ title > < style > #GFG { background-color: green; width: 150px; height: 150px; overflow: auto; /* For Safari Browser */ -webkit-transition: all 2s; transition: all 2s; } #GFG:hover { width: 300px; height: 300px; } </ style > </ head > < body > < button onclick = "myBeginner()"> Click Here! </ button > < br >< br > < div id = "GFG"> </ div > < script > function myBeginner() { /* For Safari Browser */ document.getElementById("GFG").style.WebkitTransitionTimingFunction = "linear"; document.getElementById("GFG").style.transitionTimingFunction = "linear"; } </ script > </ body > </ html > |
Output:
Example 2: This example describes ease-in property value.
html
<!DOCTYPE html> < html > < head > < title > HTML | DOM Style transitionTimingFunction property </ title > < style > #GFG { background-color: green; width: 150px; height: 150px; overflow: auto; /* For Safari Browser */ -webkit-transition: all 2s; transition: all 2s; } #GFG:hover { width: 300px; height: 300px; } </ style > </ head > < body > < button onclick = "myBeginner()"> Click Here! </ button > < br >< br > < div id = "GFG"> </ div > < script > function myBeginner() { /* For Safari Browser */ document.getElementById("GFG").style.WebkitTransitionTimingFunction = "ease-in"; document.getElementById("GFG").style.transitionTimingFunction = "ease-in"; } </ script > </ body > </ html > |
Output:
Note: Use WebkitTransitionTimingFunction as a keyword in safari browser.
Supported Browsers: The browser supported by HTML | DOM Style transitionTimingFunction property are lited below:
- Google Chrome 26.0 and above
- Edge 12 and above
- Internet Explorer 10.0 and above
- Mozilla Firefox 16.0 and above
- Opera 12.1 and above
- Safari 9 and above