ایراد در اجرای کد

سلام ، خسته نباشید.

من قطعه کد‌های زیر را اجرا می‌کنم. اما هنگامی که به 50% می‌رسم ، بدون نرمی انیمیشنیب که روی کل محتوا بود و سریع به 75 درصد می‌رسد.

لطفا ایراد کار را بگویید ، جهت این کار لازم است تا خودتان کد را اجرا کنید.

<!DOCTYPE html>
<html>
  <div class="box"></div>
  <title>آموزش انیمیشن سازی</title>
</html>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    animation-name: boxmoshen;
    animation-duration: 10s;
    position: relative;
    /*تعداد تکرار انیمیشن:*/
    animation-iteration-count: infinite;
  }
  @keyframes boxmoshen {
    /* from {
      background-color: aquamarine;
      top: 0px;
    }
    to {
      background-color: rgb(0, 202, 128);
      top: 200px;
    } */
    0% {
      top: 0px;
    }
    25% {
      top: 200px;
    }
    50% {
      right: -300px;
    }
    75% {
      top: 0px;
    }
    100% {
      right: 0px;
    }
  }
</style>

<!DOCTYPE html> <html> <div class="box"></div> <title>آموزش انیمیشن سازی</title> </html> <style> .box { width: 100px; height: 100px; background-color: aquamarine; animation-name: boxmoshen; animation-duration: 10s; position: relative; /*تعداد تکرار انیمیشن:*/ animation-iteration-count: infinite; } @keyframes boxmoshen { /* from { background-color: aquamarine; top: 0px; } to { background-color: rgb(0, 202, 128); top: 200px; } */ 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;} } </style>