CSS animation-timing-function: linear से एक समान गति की एनिमेशन बनाएं

CSS में animation-timing-function प्रॉपर्टी का linear मान एनिमेशन को शुरुआत से अंत तक एक समान गति (constant speed) से चलाता है। इसमें कोई त्वरण या मंदी नहीं होती।

उदाहरण

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

<!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: linear;}
  </style>
</head>
<body>
  <div id="demo">linear effect</div>
</body>
</html>

मुख्य बिंदु: linear एनिमेशन को पूरी अवधि में एक समान गति से चलाता है, जो यांत्रिक या रोबोटिक गति के लिए उपयुक्त है।