English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
تأثير انتقال السرعة المختلفة من البداية إلى النهاية:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础教程(oldtoolbag.com)</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
div:hover {
width:300px;
}
</style>
</head>
<body>
<h1>دالة cubic-bezier()</h1>
<p>انقلب إلى العنصر div لرؤية التأثير.</p>
<div></div>
<p><b>ملاحظة:</b> لا يدعم المتصفح Internet Explorer 9 وما قبل ذلك هذا التأثير.</p>
</body>
</html>التحقق من ذلك <يحدد دالة cubic-bezier منحنى بيسي (Cubic Bezier).
يحدد المنحنى البيسي (Bezier Curve) أربعة نقاط P0، P1، P2 و P3. P0 و P3 هما البداية والنهاية للمنحنى. P0 هي (0،0) وتعبر عن الوقت والوضع الأولي، وP3 هي (1،1) وتعبر عن الوقت والوضع النهائي.
من الرسم البياني السابق نحتاج إلى معرفة أن نطاق cubic-bezier هو
P0: القيمة الافتراضية (0، 0) P1: القيمة المتغيرة (x1، y1) P2: القيمة المتغيرة (x2، y2) P3: القيمة الافتراضية (1، 1)
يجب أن نركز على القيم من النقاط P1 و P2، حيث أن نطاق القيم في المحور X هو من 0 إلى 1، وسيكون cubic-bezier غير صالح إذا تجاوزت القيم نطاقها؛ لا يوجد تحديد للقيم في المحور Y، وبالتالي لا يجب أن تكون كبيرة.
التفسير الأكثر وضوحًا هو وضع خط مستقيم في محور يبلغ نطاقه 1 فقط، واستخراج نقطتين من المنتصف لسحبها (نطاق القيم في المحور X هو [0،1]، والقيم في المحور Y عشوائية)، وأخيرًا الشكل الناتج هو مسار سرعة التحريك.
cubic-bezier() يمكن استخدامها animation-timing-function و transition-timing-function خصائص.
إصدار الدعم: CSS3
الرقم في الجدول يمثل إصدار المتصفح الأول الذي يدعم هذه الوظيفة.
| وظيفة | |||||
|---|---|---|---|---|---|
| cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
cubic-bezier(x1,y1,x2,y2)
| القيمة | وصف |
|---|---|
| x1,y1,x2,y2 | مطلوب. قيمة عددية، يجب أن تكون x1 و x2 أرقام بين 0 و 1. |