مولّد Keyframes CSS

الصيغ الأربع

الانحلال مع الانزلاق

.animated {
  animation: fade-slide 0.6s ease both;
}

@keyframes fade-slide {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

يظهر العنصر بينما ينزلق إلى الأعلى من الأسفل.

النبض

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: .8; }
}

تأثير تنفس لطيف، مناسب لنقاط الإشعارات والشارات.

الدوران

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

دورة كاملة، مفيدة لمؤشرات التحميل والأيقونات.

الارتداد

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-24px); }
}

يقفز العنصر إلى الأعلى ثم يعود.

لماذا transform و opacity؟

تُركّب المتصفحات transform وopacity على وحدة معالجة الرسومات دون إعادة حساب التخطيط أو الرسم، لذلك يظل تحريكهما سلسًا. تتجنب الصيغ عن قصد الخصائص التي تحفز حساب التخطيط.

الصيغة المختصرة animation

تُقرأ animation: fade-slide 0.6s ease both; هكذا: حركة باسم fade-slide، مدتها 0.6 ثانية، بمنحنى ease الافتراضي. وضع التعبئة both يطبق حالة البداية قبل انطلاق الحركة ويحافظ على حالة النهاية بعد اكتمالها، ما يمنع العنصر من الوميض قبلها أو الارتداد فجأة بعدها.

قواعد التسمية

• استخدم kebab-case وفق اصطلاح CSS.
• صف الحركة لا العنصر: fade-in-up أفضل من alert-appear.
• تجنب الأسماء التي قد تتعارض مع مكتبات خارجية.

دعم المتصفحات

@keyframes شامل، مدعوم في كل متصفح منذ IE 10.