92. دالة توقيت الانتقال والتأخير

بالإضافة إلى المدة، نتحكم في منحنى السرعة للانتقال ومتى يبدأ.

3. transition-timing-function

تحدد منحنى تسارع الانتقال، مما يجعله يبدو أكثر طبيعية.

css .box { transition-timing-function: ease-in-out; }

4. transition-delay

تحدد مدة الانتظار قبل بدء الانتقال (بـ s أو ms).

css .delayed-action:hover { /* انتظر 200 مللي ثانية قبل بدء الانتقال */ transition-delay: 200ms; }

اختصار الانتقال (موصى به)

من أفضل الممارسات استخدام خاصية الاختصار transition .

transition: <الخاصية> <المدة> <دالة-التوقيت> <التأخير>;

css .smooth-item { /* ينقل جميع الخصائص خلال 0.3 ثانية، مع تسارع مريح في البداية والنهاية */ transition: all 0.3s ease-in-out 0s; }

.multiple-transition { /* انتقال الشفافية خلال 0.2 ثانية، ثم انتقال اللون خلال 0.5 ثانية */ transition: opacity 0.2s, color 0.5s; }