كيف أجعل التحريك متواصل في CSS؟

قم بتغيير 

animation: slide-slow 30s;

إلى

animation: slide-slow 30s infinite;

يمكن فعل ذلك عن طريق إضافة `animation-iteration-count: infinite` إلى `div.slide-slow div.inner`، ليصبح شكل الشيفرة كالتالي:

  div.slide-slow div.inner {
    animation: slide-slow 3s;
    margin-top: 0%;
    animation-iteration-count: infinite;
  }

ملاحظة: يمكنك تغيير كلمة `infinite` بعدد التكرارات التي ترغب بها، كما يمكنك إضافة `animation-direction: alternate` في حالة ما أردت للصورة المتحركة أن تعود للخلف إذا وصلت إلى نهاية الصفحة (حيث ستكون حركة السمكة ذهابا و إيابا).

الشيفرة الكاملة:

<style style="text/css">
  div.slide-slow {
    width: 100%;
    overflow: hidden;
  }
  div.slide-slow div.inner {
    animation: slide-slow 3s;
    margin-top: 0%;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  @keyframes slide-slow {
    from {
      margin-left: 100%;
    }
    to {
      margin-left: 0%;
    }
  }
</style>

<div class="slide-slow">
  <div class="inner">
    <img src="http://i.stack.imgur.com/nJAsS.gif" alt="Swimming fish">
  </div>
</div>

وهنالك طريقة أخرى لتحسين الشيفرة البرمجة حيث ستصبح الصورة المتحركة (السمكة) تستمر في التحرك إلى اليسار حتى تختفي ومن ثم تظهر على اليمين لتستمر حركتها، شيفرة CSS:

div.slide-slow {
  width: 100%;
  overflow: hidden;
}
div.slide-slow div.inner {
  animation: slide-slow 3s infinite;
  margin-top: 0%;
}
@keyframes slide-slow {
  from {
    margin-left: 100%;
  }
  75% {
    margin-left: 0%;
  }
  100% {
    margin-left: -15%;
  }
}

وهذه شيفرة HTML التابعة للشيفرة السابقة:

<div class="slide-slow">
  <div class="inner">
    <img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
  </div>
</div>

المصدر