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

Question

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

من قطعه کد های زیر را اجرا می کنم. اما هنگامی که به 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>

طراحی وب

صالح عطاری

20 شهریور 00

Answer 1

حذف شده

سلام توی آموزش کامل توضیح دادیم به جزییات دقت کنید شما در هر لحظه یا به عبارتی درصد انجام انیمیشن 2 موقعیت مکانی رو در نظر بگیرید.

<!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>

توسط

وحید صالحی

20 شهریور 00

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

سوالات مرتبط