الحركات والانتقالات

القاعدة:

• transition: [property] [duration] [timing-function] [delay];
• مثال: transition: all 0.3s ease-in-out;
• يوضع الكود دائماً في العنصر الأصلي وليس في حالة الـ :hover لكي يعمل التأثير في حالتي الذهاب والعودة.

كيف تعمل؟

1. نقوم بتعريف الحركة واسمها ومراحلها (0% إلى 100%):

@keyframes myAnim {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

2. نقوم بتطبيق الحركة على العنصر المطلوب:

animation: myAnim 2s infinite;