قم بإنشاء رسوم متحركة CSS احترافية، وانتقالات، وتفاعلات دقيقة، وتصميم حركات معقدة. يُستخدم عند إضافة رسوم متحركة، أو تأثيرات التمرير، أو حالات التحميل، أو انتقالات الصفحة، أو الرسوم المتحركة للتمرير، أو أي عمل تصميمي متحرك.
ثبّت مهارة الذكاء الاصطناعي css-animation-creator بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: onewave-ai/claude-skills.
| Squash & Stretch | Button press, elastic effects | | Anticipation | Hover states before action | | Staging | Focus attention on important elements | | Follow Through | Overshoot then settle | | Ease In/Out | Natural acceleration/deceleration | | Arcs | Curved motion paths | | Secondary Action | Supporting animations |
| Timing | Duration conveys weight/importance | | Exaggeration | Emphasis for clarity | | Appeal | Pleasing, polished motion |
| Micro-interaction | 100-200ms | ease-out | | Button/hover | 150-250ms | ease | | Modal open | 200-300ms | ease-out | | Modal close | 150-200ms | ease-in | | Page transition | 300-500ms | ease-in-out | | Loading loop | 1000-2000ms | linear/ease-in-out | | Attention grab | 500-1000ms | elastic |
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/onewave-ai/claude-skills --skill css-animation-creatorقم بإنشاء رسوم متحركة CSS احترافية، وانتقالات، وتفاعلات دقيقة، وتصميم حركات معقدة. يُستخدم عند إضافة رسوم متحركة، أو تأثيرات التمرير، أو حالات التحميل، أو انتقالات الصفحة، أو الرسوم المتحركة للتمرير، أو أي عمل تصميمي متحرك. المصدر: onewave-ai/claude-skills.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/onewave-ai/claude-skills --skill css-animation-creator بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/onewave-ai/claude-skills