

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the speed curve of the transition effect with JavaScript?
Use the transitionTimingFunction property to set the speed of the transition. Set it to any of the following values − ease, ease-in, ease-out, linear, etc.
Example
You can try to run the following code to return the speed curve of the transition effect with JavaScript −
<!DOCTYPE html> <html> <head> <style> #div1 { position: relative; margin: 10px; height: 300px; width: 400px; padding: 20px; border: 2px solid blue; } #div2 { padding: 80px; position: absolute; border: 2px solid BLUE; background-color: yellow; transform: rotateY(45deg); transition: all 5s; } #div2:hover { background-color: orange; width: 50px; height: 50px; padding: 100px; border-radius: 50px; } </style> </head> <body> <p>Hover over DIV2</p> <button onclick = "display()">Set</button> <div id = "div1">DIV1 <div id = "div2">DIV2</div> </div> <script> function display() { document.getElementById("div2").style.transitionTimingFunction = "ease-in"; } </script> </body> </html>
- Related Questions & Answers
- How to set the speed curve of the transition effect with CSS
- How to set when the transition effect will start with JavaScript?
- Set the speed of the hover effect with CSS
- How to set the CSS property that the transition effect is for with JavaScript?
- How to delay the Transition Effect with CSS
- Specify the speed curve of the animation with CSS
- Set a delay for the CSS transition effect
- How to set the four transition properties with JavaScript?
- Set the name of the CSS property the transition effect is for
- Set up different speed curves with CSS transition-timing-function
- Which CSS property is to be used to set the speed curve of the Animation?
- How to set the shadow effect of a text with JavaScript?
- How to create a transition effect with CSS?
- Set how many seconds or milliseconds a transition effect takes to complete.
- Speed Time Curve of Electrical Traction System
Advertisements