دليل رسوم CSS المتحركة: الانتقالات والإطارات الرئيسية والأداء

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

انتقالات CSS مقابل الرسوم المتحركة

توفر CSS آليتين مختلفتين لإنشاء الحركة: الانتقالات والرسوم المتحركة. فهم متى تستخدم كل آلية هو أساس العمل الفعال مع رسوم CSS المتحركة.

انتقالات CSS

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

.button {
  background: #3b82f6;
  transform: scale(1);
  transition: background 0.3s ease, transform 0.2s ease;
}

.button:hover {
  background: #2563eb;
  transform: scale(1.05);
}

الانتقالات مثالية للرسوم المتحركة البسيطة ذات الحالتين. تتطلب أقل قدر من الكود، وسهلة الفهم، وتعمل بشكل موثوق في المتصفحات. القيد هو أنها تحرك فقط بين قيمتين — لا يمكنك تعريف خطوات وسيطة.

رسوم CSS المتحركة (الإطارات الرئيسية)

تستخدم الرسوم المتحركة قاعدة @keyframes لتعريف تسلسل من تغييرات الأنماط عبر أي عدد من الخطوات. على عكس الانتقالات، يمكن للرسوم المتحركة أن تعمل بشكل مستقل عن تغييرات الحالة، وتكرر إلى ما لا نهاية، وتشغل بالعكس، وتتوقف مؤقتًا. تمنحك تحكمًا دقيقًا في كل إطار من الحركة.

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pulse-element {
  animation: pulse 2s ease-in-out infinite;
}

متى تستخدم أيهما

السيناريو	استخدم الانتقال	استخدم الرسوم المتحركة
تأثير التحويم	نعم	لا
حالة التركيز	نعم	لا
تبديل الرؤية	نعم	ربما
تسلسل متعدد الخطوات	لا	نعم
رسوم متحركة متكررة	لا	نعم
مستقلة عن الحالة	لا	نعم
رسوم الدخول	ربما	نعم

تحليل صيغة الإطارات الرئيسية

قاعدة @keyframes هي قلب رسوم CSS المتحركة. الفهم الكامل لصيغتها يطلق القوة الكاملة لتسلسلات الحركة متعددة الخطوات.

الإطارات الرئيسية المبنية على النسبة المئوية

تُعرَّف الإطارات الرئيسية باستخدام قيم النسبة المئوية من 0% إلى 100%، تمثل التقدم على خط الحركة الزمني. يمكنك تعريف أي عدد من الإطارات الرئيسية حسب الحاجة، ويقوم المتصفح بالاستيفاء بينها:

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-10px);
  }
}

يمكن للإطارات الرئيسية المتعددة مشاركة نفس كتلة الأنماط عن طريق فصل قيم النسبة المئوية بفواصل، مثل 0%, 100% في المثال أعلاه. هذا مفيد للرسوم المتحركة التي تعود إلى حالة البداية.

خاصية animation المختصرة

تجمع خاصية animation المختصرة ثماني خصائص فرعية في تصريح واحد. الترتيب هو: name، duration، timing-function، delay، iteration-count، direction، fill-mode، play-state.

.element {
  animation: slideIn 0.5s ease-out 0.2s 1 forwards running;
}

/* Equivalent longhand */
.element {
  animation-name: slideIn;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

أنماط ملء الرسوم المتحركة

تتحكم خاصية animation-fill-mode في الأنماط المطبقة قبل وبعد تشغيل الحركة. هذه واحدة من أكثر خصائص الرسوم المتحركة إساءة في الفهم:

none (افتراضي): يعود العنصر إلى أنماط ما قبل الحركة عند انتهائها.
forwards: يحتفظ العنصر بأنماط الإطار الأخير بعد انتهاء الحركة. ضروري لرسوم الدخول حيث تريد بقاء العنصر في موضعه النهائي.
backwards: أثناء تأخير الحركة (قبل أن تبدأ)، يطبق العنصر أنماط الإطار الأول.
both: يجمع بين سلوك forwards و backwards. يعرض العنصر الإطار الأول أثناء فترة التأخير ويحتفظ بالإطار الأخير بعد الاكتمال.

دوال التخفيف

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

دوال التخفيف المضمنة

linear: سرعة ثابتة طوال الحركة. نادرًا ما يبدو طبيعيًا لأن الأجسام في العالم الحقيقي لا تتحرك بسرعة ثابتة. مناسب للرسوم الميكانيكية أو الدورانية.
ease (افتراضي): بداية بطيئة، تسارع في المنتصف، تباطؤ في النهاية. تخفيف عام جيد لمعظم انتقالات واجهة المستخدم.
ease-in: بداية بطيئة ثم تسارع. يخلق إحساسًا "ببناء الزخم". مناسب للعناصر التي تغادر الشاشة أو تسقط.
ease-out: بداية سريعة ثم تباطؤ. يخلق إحساسًا "بالاستقرار في المكان". التخفيف الأكثر استخدامًا لدخول عناصر واجهة المستخدم إلى الشاشة.
ease-in-out: بداية ونهاية بطيئتان، أسرع في المنتصف. مشابه لـ ease لكن مع تسارع وتباطؤ أكثر وضوحًا. مناسب للانتقالات الأكبر والأكثر دراماتيكية.

منحنيات بيزيه التكعيبية

تتيح لك دالة cubic-bezier() تعريف منحنيات تخفيف مخصصة من خلال التحكم الدقيق. تقبل أربع معاملات تمثل نقاط التحكم لمنحنى بيزيه التكعيبي: cubic-bezier(x1, y1, x2, y2). تمثل قيم x الوقت (0 إلى 1)، وتمثل قيم y التقدم (يمكن أن تتجاوز 0-1 لتأثيرات التجاوز).

.element {
  /* Smooth deceleration - great for entrances */
  transition: transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1.0);

  /* Smooth acceleration - great for exits */
  transition: transform 0.2s cubic-bezier(0.4, 0.0, 1, 1);

  /* Material Design standard easing */
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

الدوال الخطوية

تنشئ دالة steps() رسومًا متحركة منفصلة إطارًا بإطار بدلاً من الاستيفاء السلس. هذا مفيد لرسوم sprite المتحركة أو إنشاء تأثير "الكتابة":

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

.typing-effect {
  animation: typing 3s steps(40, end);
  overflow: hidden;
  white-space: nowrap;
}

تحسين الأداء

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

خط أنابيب العرض

عندما تتغير خاصية CSS، يمر المتصفح بما يصل إلى ثلاث مراحل لتحديث العرض:

الأنماط: تحديد قواعد CSS المطبقة على أي عناصر.
التخطيط: حساب حجم وموضع كل عنصر. يُشغَّل بتغييرات width و height و margin و padding و top و left و font-size وغيرها من الخصائص الهندسية.
الرسم: ملء البكسلات لكل عنصر. يُشغَّل بتغييرات color و background و box-shadow و border-radius وغيرها من الخصائص البصرية.
التركيب: دمج الطبقات المرسومة بالترتيب الصحيح. هذه الخطوة فقط تعمل على GPU. تُشغَّل بتغييرات transform و opacity.

الرسوم المتحركة التي تشغل خطوة التركيب فقط هي الأفضل أداءً لأنها تتجاوز التخطيط والرسم تمامًا. لهذا السبب فإن transform و opacity هما المعيار الذهبي لرسوم CSS المتحركة عالية الأداء.

خصائص المُركِّب فقط

الخاصية	تشغل التخطيط؟	تشغل الرسم؟	تركيب GPU؟
transform	لا	لا	نعم
opacity	لا	لا	نعم
filter	لا	نعم	أحيانًا
top / left	نعم	نعم	لا
width / height	نعم	نعم	لا
margin / padding	نعم	نعم	لا
background-color	لا	نعم	لا
box-shadow	لا	نعم	لا

استخدام will-change

تخبر خاصية will-change المتصفح بالخصائص المتوقع تغييرها، مما يسمح له بالتحسين مسبقًا عن طريق رفع العنصر إلى طبقة المُركِّب الخاصة به. ومع ذلك، يجب استخدامها بحذر:

/* Apply will-change just before the animation */
.element:hover {
  will-change: transform;
}

/* Remove it after the animation completes */
.element {
  transition: transform 0.3s ease;
}

تشمل الأخطاء الشائعة في will-change تطبيقها على عدد كبير جدًا من العناصر (كل طبقة مُركِّب تستهلك ذاكرة GPU) والاحتفاظ بها بشكل دائم (مما يهدر الموارد). الممارسة الجيدة هي إضافة will-change عبر JavaScript قبل بدء الحركة مباشرة، وإزالتها بعد اكتمالها.

استخدام Transform بدلاً من خصائص التخطيط

أكثر تحسينات الأداء فعالية هو استبدال الخصائص التي تشغل التخطيط بـ transform:

استخدم transform: translateX(100px) بدلاً من left: 100px
استخدم transform: translateY(50px) بدلاً من top: 50px
استخدم transform: scale(1.5) بدلاً من width: 150%; height: 150%
استخدم transform: rotate(45deg) بدلاً من التدوير عبر التخطيط

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

أنماط الرسوم المتحركة الشائعة

تظهر أنماط معينة من الرسوم المتحركة بشكل متكرر في واجهات الويب. إتقان هذه الأنماط يمنحك مجموعة أدوات لمعظم احتياجات رسوم واجهة المستخدم الشائعة.

1. التلاشي للداخل

أبسط وأكثر رسوم الدخول تنوعًا. ينتقل العنصر من شفاف إلى معتم:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

2. الانزلاق للأعلى مع التلاشي

تأثير دخول أكثر ديناميكية يجمع بين الحركة الرأسية وتغيير الشفافية. هذا يخلق إحساسًا بوصول العناصر من الأسفل:

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUpFade 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

3. التكبير عند التحويم

تكبير خفيف عند التحويم يوفر تغذية راجعة تفاعلية مرضية:

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

4. رسوم متحركة متداخلة للقوائم

عند ظهور قائمة من العناصر، يؤدي تعيين تأخيرات حركة متداخلة لكل عنصر إلى إنشاء تأثير متسلسل يوجه العين:

.list-item {
  opacity: 0;
  transform: translateY(10px);
  animation: slideUpFade 0.3s ease-out forwards;
}

.list-item:nth-child(1) { animation-delay: 0.0s; }
.list-item:nth-child(2) { animation-delay: 0.05s; }
.list-item:nth-child(3) { animation-delay: 0.1s; }
.list-item:nth-child(4) { animation-delay: 0.15s; }
.list-item:nth-child(5) { animation-delay: 0.2s; }

للقوائم الديناميكية، استخدم JavaScript لتعيين animation-delay بناءً على فهرس كل عنصر، أو استخدم خصائص CSS المخصصة: style="animation-delay: calc(var(--i) * 0.05s)".

5. مؤشر تحميل دوار

الدوران المستمر السلس هو مؤشر تحميل كلاسيكي:

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

إمكانية الوصول للرسوم المتحركة: prefers-reduced-motion

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

تنفيذ تقليل الرسوم المتحركة

النهج الموصى به هو جعل الرسوم المتحركة ممكنة للمستخدمين الذين لم يضبطوا تفضيل تقليل الحركة:

/* Default: no animation for users who prefer reduced motion */
.element {
  opacity: 1;
  transform: none;
}

/* Only animate for users who have no motion preference */
@media (prefers-reduced-motion: no-preference) {
  .element {
    animation: slideUpFade 0.5s ease-out forwards;
  }
}

بدلاً من ذلك، يمكنك تعطيل رسوم متحركة معينة للمستخدمين الذين يفضلون تقليل الحركة:

.element {
  animation: slideUpFade 0.5s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Keep functional transitions but shorten duration */
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

ما يجب الاحتفاظ به وما يجب إزالته

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

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

مكتبات الرسوم المتحركة

بينما تتعامل رسوم CSS المتحركة مع معظم احتياجات واجهة المستخدم، توفر مكتبات JavaScript للرسوم المتحركة ميزات متقدمة مثل الحركة القائمة على الفيزياء والرسوم المرتبطة بالتمرير والتنسيق المعقد للتسلسلات.

المكتبات المعتمدة على CSS أولاً

Animate.css: مجموعة من أصناف رسوم CSS المتحركة مسبقة البناء. أضف اسم الصنف إلى عنصر لتطبيق الحركة. رائعة للنماذج الأولية السريعة لكنها قد تؤدي إلى رسوم متحركة متشابهة إذا أُفرط في استخدامها.
Hamburgers: مجموعة من انتقالات أيقونة قائمة الهامبرغر المتحركة، كلها منفذة بـ CSS خالص.

مكتبات JavaScript للرسوم المتحركة

Framer Motion: مكتبة رسوم متحركة لـ React توفر API تصريحي مع دعم فيزياء النوابض ورسوم التخطيط ودعم الإيماءات. الخيار الأفضل لتطبيقات React.
GSAP (GreenSock): أقوى مكتبة رسوم متحركة بـ JavaScript. توفر تحكمًا دقيقًا في الخط الزمني وتخفيفًا معقدًا وتحويل SVG ورسومًا مشغلة بالتمرير. تستخدمها العلامات التجارية الكبرى لمواقع التسويق والتجارب التفاعلية.
Anime.js: مكتبة رسوم متحركة خفيفة بـ JavaScript مع API نظيف. تدعم خصائص CSS و SVG و DOM وكائنات JavaScript. خيار وسطي جيد بين CSS و GSAP.
Motion One: مكتبة رسوم متحركة حديثة خفيفة مبنية على Web Animations API. توفر API بسيط مع دعم فيزياء النوابض والخط الزمني.

متى تستخدم JavaScript مقابل CSS

CSS للرسوم المتحركة التصريحية البسيطة المستجيبة لتغييرات الحالة. JavaScript لـ: الحركة القائمة على الفيزياء (النوابض، الزخم)، الرسوم المرتبطة بالتمرير، التسلسلات المعقدة مع تحكم دقيق في التوقيت، معاملات الحركة الديناميكية المحسوبة في وقت التشغيل، أو الرسوم التي تحتاج إلى إيقاف مؤقت أو عكس أو سحب برمجيًا.

تصحيح أخطاء الرسوم المتحركة

يمكن أن تكون أخطاء الرسوم المتحركة خفية وصعبة التشخيص. أدوات وتقنيات التصحيح الصحيحة تجعل العملية أكثر كفاءة.

لوحة الرسوم المتحركة في Chrome DevTools

يحتوي Chrome DevTools على لوحة رسوم متحركة مخصصة توفر قدرات تصحيح قوية:

عرض الخط الزمني: مشاهدة جميع الرسوم المتحركة النشطة على الصفحة مع مددها وتأخيراتها وإطاراتها الرئيسية.
التحكم في التشغيل: إبطاء الرسوم المتحركة إلى سرعة 1/4 أو إيقافها مؤقتًا أو سحب الخط الزمني إطارًا بإطار.
فحص الخصائص: انقر على رسم متحرك في الخط الزمني لرؤية خصائص CSS المضبوطة بالضبط وقيمها في كل إطار رئيسي.
التحرير المباشر: تعديل مدة الحركة وتأخيرها وتخفيفها مباشرة دون إعادة تحميل الصفحة.

تحليل الأداء

استخدم لوحة Performance في Chrome DevTools لتحديد تقطيع الرسوم المتحركة:

تسجيل تتبع الأداء أثناء تشغيل الرسوم المتحركة
البحث عن إطارات تتجاوز ميزانية 16.67ms (تظهر كأشرطة حمراء في مخطط الإطارات)
التحقق من عمليات "Layout" في إطارات الحركة، مما يشير إلى خصائص تشغل التخطيط
استخدام علامة تبويب "Rendering" لتمكين "Paint flashing" (يظهر مناطق إعادة الرسم باللون الأخضر) و "Layer borders" (يظهر طبقات المُركِّب)

سيناريوهات التصحيح الشائعة

الحركة لا تعمل: تحقق من ضبط animation-fill-mode بشكل صحيح. بدون forwards أو both، يعود العنصر إلى حالته قبل الحركة. تحقق أيضًا من أن العنصر له أبعاد صحيحة — transform: scale(0) يجعل العنصر غير مرئي لكنه موجود.
الحركة متقطعة: افتح لوحة Performance وابحث عن الإطارات الطويلة. تحقق مما إذا كنت تحرك خصائص تشغل التخطيط. انتقل إلى transform و opacity.
تأخير الحركة يبدو غير صحيح: تذكر أن animation-delay ينشئ فجوة قبل بدء الحركة. خلال هذه الفجوة، يعرض العنصر حالته قبل الحركة ما لم تضبط animation-fill-mode: backwards أو both.
الحركة تعمل في Chrome لكنها لا تعمل في Safari: Safari أكثر صرامة في تحليل اختصار animation. تأكد من أن جميع القيم بالترتيب الصحيح وأنك لا تستخدم ميزات غير مدعومة.

تعمل مع CSS؟ جرب أدوات CSS المجانية الخاصة بنا لتنسيق وضغط وتحسين أوراق الأنماط الخاصة بك للإنتاج.

أداة تنسيق CSS أداة ضغط CSS

الأسئلة الشائعة

هل يجب استخدام انتقالات CSS أم رسوم CSS المتحركة؟

انتقالات CSS للتغييرات البسيطة من النقطة أ إلى النقطة ب، مثل تأثيرات التحويم وحالات التركيز وتبديل الرؤية. رسوم CSS المتحركة (الإطارات الرئيسية) للتسلسلات المعقدة متعددة الخطوات أو الرسوم المتكررة أو الرسوم التي تحتاج إلى العمل بشكل مستقل عن تغييرات الحالة. الانتقالات أبسط؛ والرسوم المتحركة توفر تحكمًا أكبر.

ما هي خصائص CSS الآمنة للرسوم المتحركة من حيث الأداء؟

أفضل الخصائص أداءً للرسوم المتحركة هي transform و opacity، لأنه يمكن معالجتها بالكامل بواسطة مُركِّب GPU دون تشغيل التخطيط أو الرسم. خصائص أخرى مثل width و height و margin و top تشغل إعادة حساب التخطيط وهي مكلفة. فضّل دائمًا transform: translateX() على left، و transform: scale() على تغييرات width/height.

كيفية توفير إمكانية الوصول للمستخدمين الحساسين للرسوم المتحركة؟

استخدم استعلام الوسائط prefers-reduced-motion لتعطيل أو تبسيط الرسوم المتحركة للمستخدمين الذين مكّنوا إعداد "تقليل الحركة" في نظام التشغيل. غلِّف الرسوم المتحركة غير الأساسية في @media (prefers-reduced-motion: no-preference)، وقدم تغييرات حالة فورية كبديل للمستخدمين الذين يفضلون تقليل الحركة.

ما هو will-change ومتى يجب استخدامه؟

will-change هي خاصية CSS تلمح للمتصفح بالخصائص التي ستتغير في المستقبل، مما يسمح له بالتحسين مسبقًا. استخدمها بحذر وفقط عند ملاحظة مشكلات في الأداء. طبّقها قبل بدء الحركة مباشرة وأزلها بعد اكتمالها. الإفراط في استخدام will-change يهدر ذاكرة GPU وقد يضر بالأداء فعليًا.

كيفية تصحيح أخطاء رسوم CSS المتحركة؟

يوفر Chrome DevTools أدوات قوية لتصحيح أخطاء الرسوم المتحركة. افتح لوحة Animations (في قائمة More tools) لعرض جميع الرسوم المتحركة النشطة، وسحب الخط الزمني، وتعديل المدة والتأخير مباشرة، وإبطاء الرسوم المتحركة إلى سرعة 1/4. يمكنك أيضًا استخدام لوحة Performance لتحديد تقطيع الرسوم المتحركة واهتزاز التخطيط.