خاصية دالة توقيت الحركة
آخر تحديث: 2026-09-13
animation-timing-function خاصية دالة توقيت الحركة
تحدد خاصية animation-timing-function كيفية تغيّر سرعة الحركة مع الوقت — سواء كانت بوتيرة ثابتة، أو تبدأ سريعة وتتباطأ، أو تبدو مرنة. ومن خلال التحكم في توزيع الأوقات لأطر البين، تجعل الحركة أكثر واقعية فيزيائياً أو أكثر تنسيقاً، وهي خاصية أساسية لجودة حركة مصقولة.
| الفئة | |
|---|---|
| القيمة الأولية | ease |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
animation-timing-function: ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps(<integer>) | cubic-bezier(<number>,<number>,<number>,<number>);⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps() | cubic-bezier() | كلمة مفتاحية | منحنى سرعة الحركة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| animation-timing-function | ✓ v43 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v30 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يسمح cubic-bezier() بتعريف أي منحنى بيزييه مخصص؛ وأدوات مثل cubic-bezier.com تجعله مرئياً تفاعلياً. ويُستخدم steps() للرسوم المتحركة إطاراً بإطار مثل أوراق sprite.
تلميح： ease هو الافتراضي ويتصرف ببطء-سريع-بطء. يناسب linear بسرعة ثابتة الدوران المستمر؛ ويُستخدم ease-out عادةً عندما تدخل العناصر الشاشة، و ease-in عند مغادرتها.
❓ الأسئلة الشائعة
Qهل transition-timing-function هو نفسه animation-timing-function؟
Aالقيم المقبولة متطابقة — ease و linear و cubic-bezier() و steps() وغيرها — ولكنها تؤثر في أشياء مختلفة: الأول يُطبَّق على الانتقالات والثاني على الحركات. وكلاهما يتحكم في العلاقة بين الوقت والتقدم لا بين المسافة والسرعة، لذا ينتج نفس القيمة cubic-bezier نفس التأثير في المكانين.
Qكيف أنشئ تأثيراً مرناً أو قافزاً باستخدام cubic-bezier؟
Aاستخدم cubic-bezier() بقيم y خارج النطاق 0-1، مثلًا cubic-bezier(0.68, -0.55, 0.27, 1.55). عندما تتجاوز المنحنى النطاق، يتحرك العنصر متجاوزاً القيمة الهدف أولاً ثم يعود، مما يُنتج إحساساً مرناً. وتناسب هذه المنحنيات المتجاوزة للنطاق التفاعلات الحيوية مثل الأزرار القافزة ودخول النوافذ المنبثقة.
Qكيف أكتب حركة steps() إطاراً بإطار، ومتى يجب استخدامها؟
Aيقسم steps(n) الحركة إلى n أجزاء متساوية، وتقفز القيمة بين الأجزاء بدلاً من الاستيفاء المستمر. وبالاقتران مع ورقة sprite، يُنتج حركة إطاراً بإطار، حيث يدوم كل إطار duration / n. يحتفظ jump-start بالإطار الأول، ويحتفظ jump-end بالأخير، و step-start/step-end هما الصيغتان المختصرتان.
Qما الفرق بين ease و ease-in و ease-out و linear، ومتى أستخدم كل واحد؟
Aيبدأ ease (الافتراضي) سريعاً وينتهي ببطء، وهو خيار جيد للأغراض العامة. ويبدأ ease-in ببطء ويتسارع، ويناسب العناصر التي تغادر الشاشة. ويبدأ ease-out سريعاً ويتباطأ، ويناسب العناصر التي تدخل — مثل النوافذ المنبثقة والبطاقات المنزلقة. و ease-in-out بطيء عند كلا الطرفين، جيد لتأثيرات الحلقة مثل الأضواء النابضة. أما linear فبسرعة ثابتة طوال الوقت، ومثالي للدوران وأشرطة التقدم.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
