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

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

उदाहरण

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

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 150px;
      height: 200px;
      position: relative;
      background-color: #808000;
      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-out;}
  </style>
</head>
<body>
  <div id="demo">ease-out effect</div>
</body>
</html>

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