دالة cubic-bezier() في CSS

التعريف والاستخدام

في CSS cubic-bezier() يستخدم هذا الدالة لتعريف المنحنى البيزيير الثلاثي.

يحدد المنحنى البيزيير الثلاثي بأربعة نقاط P0،P1،P2 وP3. في CSS،P0 وP3 هي البداية والنهاية للمنحنى، وهي أرقام نسبية ثابتة. P0 هي (0،0)، تمثل الوقت والوضع الأولي؛P3 هي (1،1)، تمثل الوقت والوضع النهائي.

cubic-bezier() يمكن دمج الدوال animation-timing-function والمعلمات transition-timing-function استخدام الخصائص معًا.

مثال

مثال 1

تأثير انتقال من البداية إلى النهاية يتغير السرعة:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

جرب بنفسك

مثال 2

عرض عناصر <div> التي تحتوي على قيم مختلفة من سرعة البيزيير الثلاثي:

جرب بنفسك

قواعد النص لـ CSS

cubic-bezier(x1,y1,x2,y2)

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم هذه الوظيفة بشكل كامل لأول مرة.

الصفحات ذات الصلة

المرجع:خصائص animation-timing-function CSS

المرجع:خصائص transition-timing-function في CSS