دالة CSS cubic-Bezier ()
مثال
تأثير انتقالي بسرعة متغيرة من البداية إلى النهاية:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
التعريف والاستخدام
تحدد الدالة cubic-Bezier () منحنى Cubic Bezier.
يتم تعريف منحنى بيزير مكعب بأربع نقاط P0 و P1 و P2 و P3. P0 و P3 هما بداية ونهاية المنحنى ، وفي CSS يتم إصلاح هذه النقاط لأن الإحداثيات هي نسب. P0 هي (0 ، 0) وتمثل الوقت الأولي والحالة الأولية ، P3 هي (1 ، 1) وتمثل الوقت النهائي والحالة النهائية.
يمكن استخدام الدالة cubic-bezier () مع خاصية Animation-time -function وخاصية transport-tim-function .
الإصدار: | CSS3 |
---|
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الوظيفة بشكل كامل.
Function | |||||
---|---|---|---|---|---|
cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
بنية CSS
cubic-bezier(x1,y1,x2,y2)
Value | Description |
---|---|
x1,y1,x2,y2 | Required. Numeric values. x1 and x2 must be a number from 0 to 1 |