96. خصائص الرسوم المتحركة المفصلة
يتكون اختصار animation من ثماني خصائص. نركز هنا على الخصائص الأربع الرئيسية بخلاف الاسم:
1. animation-duration
كم من الوقت تستغرق دورة واحدة من الرسوم المتحركة (مثل 2s).
2. animation-timing-function
منحنى السرعة للمدة (نفس قيم توقيت الانتقال، مثل linear و ease-in-out).
3. animation-iteration-count
عدد المرات التي يجب أن تعمل فيها الرسوم المتحركة.
- تأخذ عدداً (مثل
3). - تأخذ الكلمة المحجوزة
infinite(تعمل للأبد).
4. animation-direction
تحدد ما إذا كانت الرسوم المتحركة يجب أن تتبادل الاتجاهات.
normal(تعمل من 0% إلى 100% في كل دورة).reverse(تعمل من 100% إلى 0% في كل دورة).alternate(تعمل من 0% إلى 100%، ثم من 100% إلى 0%، ثم من 0% إلى 100%).
css .moving-element { animation-name: slide; animation-duration: 4s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; /* تنزلق للأمام والخلف بسلاسة */ }