CSS3 Spin Animation

لقد قمت بتنفيذ أنماط الرسوم المتحركة بشكل صحيح، ولكن الرسوم المتحركة الخاصة بك لا تعمل لأنك لم تحدد الإطارات الرئيسية لـ الرسوم المتحركة.

تتطلب الرسوم المتحركة CSS3 إطارات رئيسية لتحديد حالات البداية والنهاية للرسوم المتحركة.

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

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

يحدد هذا الإطار الرئيسي الذي يبدأ الرسم المتحرك عند 0 درجة وينتهي عند 360 درجة. يمكنك تخصيص هذه القيم لإنشاء تأثير الحركة المطلوب.

إليك عرض توضيحي لتوضيح الحل:

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

مع هذه التغييرات، يجب أن يدور العنصر الخاص بك الآن بشكل مستمر. تذكر، لكي تعمل الرسوم المتحركة CSS3، تحتاج إلى تحديد كل من أنماط الرسوم المتحركة والإطارات الرئيسية للرسوم المتحركة.