CSS transition-timing-function प्रॉपर्टी

transition-timing-function से अलग-अलग स्पीड कर्व सेट करने के लिए निम्न कोड चलाकर देखें:

उदाहरण

<!DOCTYPE html> <html>    <head>       <style>          div {             width: 100px;             height: 100px;             background: red;             transition: width 4s;          }          #effect1 {             transition-timing-function: linear;          }          #effect2 {             transition-timing-function: ease-in;          }          #effect3 {             transition-timing-function: ease-out;          }          div:hover {             width: 250px;          }       </style>    </head>    <body>       <h1>Transition Effect</h1>       <p>Hover over the div elements and see the transition effect and the speed:</p>       <div id = "effect1">linear effect</div><br>       <div id = "effect2">ease-in effect</div><br>       <div id = "effect3">ease-out effect</div><br>    </body> </html>