ANIMATION - Studytonight

ANIMATION
<!DOCTYPE html>
<html>
<head>
  <style> 
    div {
      width: 100px;
      height: 50px;
      background-color: #0ed7ed;
      font-weight: bold;
      position: relative;
      font-size: 20px;
      animation: mymove 5s infinite;
    }

    #div1 {animation-timing-function: linear;}
    #div2 {animation-timing-function: ease;}
    #div3 {animation-timing-function: ease-in;}
    #div4 {animation-timing-function: ease-out;}
    #div5 {animation-timing-function: ease-in-out;}

    @keyframes mymove {
      from {left: 0px;}
      to {left: 300px;}
    }
  </style>
</head>
<body>
  <div id="div1">linear</div>
  <div id="div2">ease</div>
  <div id="div3">ease-in</div>
  <div id="div4">ease-out</div>
  <div id="div5">ease-in-out</div>
</body>
</html>