العربية
ارسم منحنيات تيسير CSS مخصّصة مع معاينة متحركة مباشرة.
آخر تحديث
.element {
transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}وظيفة *التيسير* (easing) في CSS تتحكّم في تسارع وتباطؤ الحركة على مدى مدتها. الكلمات المفتاحية ease وease-in وease-out وease-in-out اختصارات لأربعة منحنيات محدّدة. لما تحتاجه أبعد من ذلك، يقدّم CSS الدالة cubic-bezier() - أربعة أرقام ترسم منحنى مخصّصًا.
هذه الأرقام الأربعة هي إحداثيات نقطتي تحكّم (x1, y1, x2, y2). كتابتها يدويًا مزعجة لأن التغييرات الصغيرة تُحدث آثارًا بصرية كبيرة، وأي تجاوز بسيط يُنتج حركة *مرتدّة* لا تظهر في الأرقام وحدها. المحرّر البصري يتيح سحب المقابض ورؤية المنحنى يستجيب فورًا - أسرع بكثير من تعديل الأرقام العشرية.
محرّر Coddy يرسم المنحنى مباشرة، ويحرّك كرة معاينة بتيسيرك المُختار، ويوفّر قوالب جاهزة للأنماط الشائعة: كلمات CSS المفتاحية، منحنى Material Design *standard*، ارتداد bouncy out، وanticipate مع overshoot. انسخ السلسلة cubic-bezier() ولصقها في CSS - كل ذلك داخل المتصفّح.
linear - تقدّم ثابت لكل وحدة زمن.اختر قالبًا قريبًا من الإحساس المطلوب. *Material standard* و*Bouncy out* نقاط بداية ممتازة للواجهة، و*ease-out* هو الخيار الآمن لحركات الظهور.
الدائرتان الملوّنتان نقطتا التحكّم. اسحب الأولى لضبط *بداية* الحركة، والثانية لضبط *نهايتها*. سحب المقبض فوق حافة اللوحة العلوية ينتج overshoot.
ضع مدة واقعية لحركتك الحقيقية. انتقالات الواجهة عادةً 150–300ms، وحركات التأكيد 400–600ms. اضغط *Replay* لإعادة المعاينة بالإعدادات الجديدة.
للقيم الدقيقة اكتب في حقول X1/Y1/X2/Y2. Y قد يخرج عن 0..1، بينما X يبقى ضمن 0..1.
اضغط *نسخ* لتحصل على قاعدة transition كاملة. ألصقها في ملف الأنماط واستبدل transform بالخاصية التي ستحرّكها فعلاً.
تيسيرات شائعة وقيم cubic-bezier الكامنة وراءها. الكلمات الأربع المعروفة هي ألقاب لمنحنيات بعينها.
| التيسير | قيم cubic-bezier | متى تستخدمه |
|---|---|---|
ease | (0.25, 0.1, 0.25, 1) | افتراضي transition - لطيف لكنه عام |
linear | (0, 0, 1, 1) | سرعة ثابتة - عادةً غير مناسب للواجهة، مناسب للسبينر |
ease-in | (0.42, 0, 1, 1) | بداية بطيئة ونهاية سريعة - الأنسب للخروج |
ease-out | (0, 0, 0.58, 1) | بداية سريعة ونهاية بطيئة - الأنسب للظهور والاستجابات |
ease-in-out | (0.42, 0, 0.58, 1) | متناظر - مناسب للمفاتيح ذات الذهاب والإياب |
| Material standard | (0.4, 0, 0.2, 1) | حركة واجهة عصرية وحاذقة |
| Bouncy out | (0.18, 0.89, 0.32, 1.28) | يتجاوز ثم يستقرّ - لظهور مرح |
.btn { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);}.btn:hover { transform: translateY(-2px);}يحدث معظم الارتفاع بسرعة في البداية ثم يستقرّ بلطف - يبدو متجاوبًا مع المؤشر بدل أن يبدو متثاقلاً.
.card { transition: transform 350ms cubic-bezier(0.18, 0.89, 0.32, 1.28);}قيمة Y2 = 1.28 تجعل المنحنى يتجاوز الهدف ثم يستقرّ. استخدمه باعتدال - الارتداد في كل مكان يصبح مزعجًا سريعًا.
.hero { transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);}Y1 سالب يجعل الحركة تذهب لحظة في الاتجاه *المعاكس* قبل أن تنطلق إلى الهدف. حيلة كلاسيكية من فن الأنيميشن - تجعل الحركة الرئيسية تبدو مقصودة.
ease-in لحركات الظهور. يبدأ بطيئًا وينتهي سريعًا - عكس الإحساس المتجاوب. استخدم ease-out بدلًا منه.linear للواجهة بحجّة أنه "محايد". السرعة الثابتة تبدو ميكانيكية؛ مناسبة لأشرطة التقدّم والسبينر فقط.cubic-bezier()؟cubic-bezier(x1, y1, x2, y2). النقطة الأولى تُشكّل *بداية* الحركة، والثانية تُشكّل *نهايتها*. X محصور بين 0 و1 (الزمن)، أما Y فيمكن أن يخرج عن 0..1 لتأثيرات overshoot/anticipate (التقدّم).cubic-bezier(0.4, 0, 0.2, 1). للخروج يناسب *ease-in*. تجنّب *linear* إلا في أشرطة التقدّم.ease وease-out؟ease يبدأ ببطء أيضًا. ease-out ينطلق بأقصى سرعة ثم يتباطأ - هذا الانطلاق *الفوري* هو ما يجعله أكثر استجابة من ease.cubic-bezier(0.18, 0.89, 0.32, 1.28) يتجاوز الهدف بنحو 28% قبل أن يستقرّ. لارتدادات متعدّدة تحتاج @keyframes أو مكتبة spring - cubic-bezier يسمح بتجاوز واحد فقط.@keyframes؟animation-timing-function، إما في اختصار animation أو لكل keyframe على حدة. للحركات المتعدّدة المراحل يمكنك تطبيق تيسير مختلف بين كل زوج من الإطارات.