۱ صالح عطاری
ایراد در اجرای کد
وحید صالحی حل شده توسط وحید صالحی

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

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

سلام توی آموزش کامل توضیح دادیم به جزییات دقت کنید شما در هر لحظه یا به عبارتی درصد انجام انیمیشن 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>

 

بهترین پاسخ
وحید صالحی ۲۰ شهریور ۱۴۰۰، ۰۹:۱۳