> https://learn.abdulosama.com/qamoos/animation

![رسم توضيحي يشرح Animation (الرسوم المتحركة): تغيير بصري يحدث على مراحل متتابعة، فيجعل عنصرًا على الشاشة يبدو كأنه يتحرك.](https://learn.abdulosama.com/images/guide/animation.webp)

# Animationالرسوم المتحركة

## ما هو Animation؟

تغيير بصري يحدث على مراحل متتابعة، فيجعل عنصرًا على الشاشة يبدو كأنه يتحرك.

## ما معنى Animation بالعربي؟

الاسم المعتمد الآن هو «**الرسوم المتحركة** ». ولأن كثيرًا من المصطلحات لم يستقرّ لها اسم عربي واحد، يكتب هذا القاموس قرّاؤه: صوّت للاسم الذي تراه أوضح، أو اقترح اسمًا أفضل. نراجع الأصوات في كل جولة ونعتمد ما يختاره الناس.

1. الرسوم المتحركة الاسم المعتمد اسم القاموس

صوت واحد لكل قارئ في كل مصطلح، وتستطيع نقله إلى اسم آخر. حين يتجاوز اسمٌ الاسمَ المعتمد ويصل إلى 5 أصوات على الأقل، نعرضه للاعتماد في الجولة التالية.

اقترح اسمًا عربيًا أفضل هل الشرح غير واضح أو فيه خطأ؟

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

هذا هو مبدأ الرسوم المتحركة (Animation) في التصميم الرقمي: يتغيّر شكل العنصر أو موضعه أو حجمه أو لونه مع مرور الوقت، فتبدو النتيجة حركة سلسة. قد ينفّذ المتصفح ذلك وفق تعليمات في صفحة الموقع، وقد تكون الحركة داخل فيديو أو صورة متحركة. المهم أن ما تراه ليس عنصرًا انتقل فجأة من حالة إلى أخرى؛ هناك خطوات بين الحالتين.

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

القاعدة التي تبقى معك: اجعل الحركة تشرح تغييرًا أو توجّه الانتباه، لا تتحرك لمجرد أن المقبض موجود.

## لماذا يهمك Animation؟

حين تراجع موقعك أو إعلانك، يمكنك أن تسأل: هل تساعد هذه الحركة الزائر على الفهم واتخاذ الخطوة التالية، أم تؤخره وتشتته؟

## متى ستسمع كلمة Animation؟

يقترح المصمم حركة خفيفة للقائمة حتى يعرف الزائر أنها فُتحت، أو يناقش الفريق تقليل الحركات على الهاتف.

## كلمات قريبة

- [User experience · تجربة المستخدم](https://learn.abdulosama.com/qamoos/user-experience)
- [Creative · المادة الإعلانية](https://learn.abdulosama.com/qamoos/creative)
- [Website · موقع إلكتروني](https://learn.abdulosama.com/qamoos/website)

## حمّل القاموس كاملًا بصيغة PDF

قاموس التقنية بالعربي: 218 مصطلحًا في كتاب واحد مصوّر، تقرؤه على هاتفك أو تطبعه. سجّل دخولك بواتساب أو Google (٣٠ ثانية)، وتنضمّ إلى قائمة عبدول على واتساب، ويظهر لك رابط التحميل فورًا.

[سجّل الدخول وحمّل القاموس](https://learn.abdulosama.com/login?return=%2Fqamoos%2Fanimation%23download)

**تمّ.** انضممت إلى القائمة، وهذا رابط القاموس. يعمل الرابط سبعة أيام، فاحفظ الملف على جهازك.

تحميل القاموس (PDF)

لن نشارك رقمك مع أحد. يمكنك الخروج من القائمة في أي وقت.

## تريد إضافته إلى موقعك؟

أداة مجانية لموقعك أو مدونتك: يظهر خط منقّط تحت مصطلحات القاموس في مقالاتك، ومن يمرّ عليها يرى اسمها العربي ومعناها، ورابطًا للشرح الكامل في صفحة جديدة. لا تجمع أي بيانات عن زوّارك.

1. **الصق هذا السطر** قبل نهاية صفحات موقعك (قبل `</body>`):
`<script src="https://learn.abdulosama.com/qamoos/embed.js" defer></script>`
2. **أو اطلب ذلك من وكيل الذكاء الاصطناعي** الذي يبني موقعك (Claude Code أو Cursor أو غيرهما): انسخ هذه الجملة وأرسلها له.
`أضف أداة «قاموس التقنية بالعربي» إلى موقعي، واتبع التعليمات هنا: https://learn.abdulosama.com/qamoos/install.md`
3. **دليل التثبيت** لووردبريس وShopify وWebflow وNext.js وغيرها: [افتحه ↗](https://learn.abdulosama.com/qamoos/install.md)