الرسوم المتحركة التي لا نهاية لها لتدوير CSS: كيفية تدوير أيقونة بشكل مستمر

لتحقيق دوران لا نهاية له للأيقونة باستخدام CSS، مجموعة من الرسوم المتحركة CSS والإطارات الرئيسية مطلوبة. توضح الخطوات التالية الحل:

1. إضافة إطارات رئيسية:

نحدد إطارين رئيسيين، أحدهما لبداية التدوير (0 درجة) والآخر للنهاية (360 درجة). وهذا يضمن انتقالًا سلسًا.

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

2. تطبيق الرسوم المتحركة:

نحن نطبق الرسوم المتحركة للإطار الرئيسي التي تم إنشاؤها على العنصر الذي نريد تدويره باستخدام خاصية الرسوم المتحركة CSS. تتطلب هذه الخاصية ثلاث معلمات: اسم الإطار الرئيسي، والمدة، وسلوك الحلقة (لا نهائي).

  Rotate

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

3. تصحيح مشكلات توافق المتصفح:

لضمان التوافق عبر المتصفحات المختلفة، نقوم بتضمين بادئات البائع للمتصفحات المستندة إلى WebKit (Chrome وSafari) والخصائص القياسية للمتصفحات الأخرى.

.rotating {
  -webkit-animation: rotating 2s linear infinite; /* Safari and Chrome */
  -moz-animation: rotating 2s linear infinite;    /* Firefox */
  -ms-animation: rotating 2s linear infinite;     /* IE */
  animation: rotating 2s linear infinite;         /* Standard */
}

باتباع هذه الخطوات، يمكنك بسهولة إنشاء رسوم متحركة بالتناوب لا نهاية لها للأيقونات والعناصر الأخرى باستخدام CSS.