---
url: 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/design/animation-tab'
title: 'علامة تبويب الرسوم المتحركة | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:38:34+00:00'
updated: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'أضف تأثيرات الحركة لتمييز العناصر عن بقية الصفحة. اتبع الخطوات أدناه لبدء إضافة الرسوم المتحركة إلى العنصر الخاص بك:'
tags:
  - 'Design guides'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'علامة تبويب الرسوم المتحركة'
      description: 'أضف تأثيرات الحركة لتمييز العناصر عن بقية الصفحة. اتبع الخطوات أدناه لبدء إضافة الرسوم المتحركة إلى العنصر الخاص بك:'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T09:38:34+0000'
      dateModified: '2026-10-23T14:31:17+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/design/animation-tab'
      articleSection: 'Design guides'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/design/animation-tab'
      description: 'أضف تأثيرات الحركة لتمييز العناصر عن بقية الصفحة. اتبع الخطوات أدناه لبدء إضافة الرسوم المتحركة إلى العنصر الخاص بك:'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: الرئيسية
            item: 'https://dxpr.com/ar'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ar
---
[Help Center](/ar/hc)/[Documentation](/ar/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Style your elements](/hc/documentation/learn-dxpr-builder/element-settings) /[Design guides](/hc/documentation/learn-dxpr-builder/design/overview) # علامة تبويب الرسوم المتحركة.

 Learn DXPR BuilderBuild pagesStyle your elementsDesign guides

   ## In this guide

 Related guides

- [Hover effects](/hc/documentation/learn-dxpr-builder/design/hover-effects)
- [Backgrounds](/hc/documentation/learn-dxpr-builder/design/backgrounds)
- [دائري](/ar/hc/documentation/learn-dxpr-builder/layout/carousel-layout)

 أضف تأثيرات الحركة لتمييز العناصر عن بقية الصفحة.

 اتبع الخطوات أدناه لبدء إضافة الرسوم المتحركة إلى العنصر الخاص بك:

- انقر على أيقونة **+**
- انتقل إلى علامة **التبويب المحتوى**
- حدد عنصرا
- انتقل إلى علامة **التبويب الرسوم المتحركة**
- حدد خيار الرسوم المتحركة من إعدادات **بدء الرسوم المتحركة**

    - **عند الظهور** يعني أن الرسوم المتحركة ستبدأ بمجرد ظهور العنصر في نافذة المتصفح
    - **عند التحويم** يعني أن الرسوم المتحركة ستبدأ بمجرد تمرير الماوس فوق العنصر
    - **عند النقر** يعني أن الرسوم المتحركة ستبدأ بمجرد النقر فوق العنصر
    - **"تشغيل"** يعني أن الرسوم المتحركة ستظهر بمجرد تشغيلها بواسطة برنامج نصي

1. حدد **الرسوم المتحركة** التي ستظهر بمجرد بدء الرسوم المتحركة. على سبيل المثال، إذا قمت بتحديد Hover، فسوف تظهر الرسوم المتحركة بمجرد وضع الماوس فوق العنصر
2. *اختياريًا،* حدد **خروج الرسوم المتحركة** الذي سيظهر بمجرد توقف بدء الرسوم المتحركة. على سبيل المثال، إذا قمت بتحديد Hover، فسوف تظهر الرسوم المتحركة بمجرد عدم وضع الماوس فوق العنصر بعد الآن
3. قم بتعيين خيار **إخفاء** العنصر قبل أو بعد الرسوم المتحركة. يتم استخدام هذا بشكل أساسي عندما يتم تعيين In-Animation على رسم متحرك يحتوي على "in". على سبيل المثال: إذا قمت بتحديد إخفاء العنصر **قبل** الرسوم المتحركة. إذا كان خيار بدء الرسوم المتحركة هو **عند النقر** ، فلن يكون العنصر مرئيًا حتى تنقر عليه (لذا لا تفعل ذلك).
4. تعيين حدود العنصر في **حدود المظهر** ***.*** على سبيل المثال، إذا تم التعيين على 50، فستبدأ الرسوم المتحركة بمجرد تمرير العنصر إلى ما بعد منتصف نافذة المتصفح. يؤدي تعيين هذا إلى 100% إلى تحريك العنصر فورًا عند تمرير العنصر إلى نافذة المتصفح.
5. قم بتشغيل **Infinite** حتى تستمر الرسوم المتحركة في التكرار
6. اضبط **مدة** الرسوم المتحركة بالمللي ثانية (المدة الأقل تعني حركة أسرع)
7. قم بتعيين تأخير للرسوم المتحركة من خلال إعدادات **In-Delay** (التأخير الأعلى يساوي حركة أبطأ)
8. قم بتعيين تأخير للرسوم المتحركة للخارج من خلال إعدادات **Out-Delay** (التأخير الأعلى يساوي حركة أبطأ)
9. بمجرد تحديد الإعدادات المفضلة لديك، يمكنك النقر فوق **"حفظ التغييرات"** وبذلك تكون قد انتهيت!