CSS animation-timing-function से एनिमेशन का धीमा शुरुआत सेट करें

CSS में animation-timing-function प्रॉपर्टी का ease-in मान एनिमेशन को धीमी गति से शुरू करता है। एनिमेशन धीरे-धीरे शुरू होता है और फिर तेज हो जाता है।

उदाहरण

नीचे दिए गए उदाहरण में, एक <div> तत्व पर एनिमेशन लागू किया गया है जो ease-in टाइमिंग फंक्शन का उपयोग करता है।

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 150px;
      height: 200px;
      position: relative;
      background-color: yellow;
      animation-name: myanim;
      animation-duration: 2s;
      animation-direction: alternate-reverse;
      animation-iteration-count: 3;
    }
    @keyframes myanim {
      from {left: 100px;}
      to {left: 200px;}
    }
    #demo {animation-timing-function: ease-in;}
  </style>
</head>
<body>
  <div id="demo">ease-in effect</div>
</body>
</html>

मुख्य बिंदु: ease-in एनिमेशन को शुरुआत में धीमा करता है, जिससे एक सहज शुरुआत प्रभाव मिलता है।