كيفية تحريك الصور في CSS للأبد

في هذه المقالة، سنتناول سؤالًا شائعًا يدور حول الرسوم المتحركة CSS3: جعلها تعمل إلى أجل غير مسمى.

التحدي

لنفترض أن لديك سلسلة من الصور التي تريد عرضها كعرض شرائح، مع الانتقال بسلاسة بينها باستخدام الرسوم المتحركة CSS3. ومع ذلك، فأنت غير راضٍ عن السلوك الافتراضي، حيث تتلاشى الصورة الأخيرة ويعاد تحميل الصفحة، مما يؤدي إلى إعادة تشغيل عرض الشرائح بشكل فعال.

الحل

لتحقيق رسوم متحركة متكررة بشكل سلس، نحتاج لتعديل CSS لتحديد أن الرسوم المتحركة يجب أن تتكرر بشكل مستمر. بشكل افتراضي، يتم تعيين الرسوم المتحركة لـ CSS للتشغيل مرة واحدة فقط.

الخاصية الرئيسية التي سنضيفها إلى CSS لدينا هي animation-iteration-count. إليك مثال:

@keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-moz-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-o-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1;
  animation-iteration-count: infinite;
  -moz-animation: fadeinphoto 7s 1;
  -webkit-animation: fadeinphoto 7s 1;
  -o-animation: fadeinphoto 7s 1;
}

من خلال تعيين animation-iteration-count على لانهائي، ستستمر الرسوم المتحركة في التكرار إلى أجل غير مسمى، مما يؤدي إلى إنشاء انتقال سلس بين صورك.