cubic-bezier
Introduction:
介紹：
How many times have we come across the word function? Well, it would not be wrong to say a lot. The fact that functions are used in web development while developing a website or web page is very important. There are numerous functions out there that can help you reduce the line of your codes and make your work easy and fast. Besides, if you wish to be a good coder then you must learn as many functions as you can. By learning those functions you will be able to write very efficient codes and that will also showcase your knowledge regarding web development.
我們遇到過幾次單詞功能？ 好吧，說很多話是沒有錯的。 在開發網站或網頁時在Web開發中使用功能這一事實非常重要。 有許多功能可以幫助您減少代碼行，并使您的工作輕松快捷。 此外，如果您想成為一名優秀的編碼人員，那么您必須學習盡可能多的功能。 通過學習這些功能，您將能夠編寫非常有效的代碼，并且還將展示您對Web開發的知識。
This discussion brings us to a question: why are we talking so much about functions? Well, the answer is very clear as in this article we are going to learn about one very specific function known as cubic-bezier() function in CSS. Most of you might already know what this function is and what its behavior is and how it is helpful. But if you are not aware of this function even a bit, then this article is just for you. So, keep on reading and everything will be made clear to you about the cubic-bezier() function in CSS.
討論給我們帶來了一個問題：為什么我們這么多談論功能？ 很好，答案很明確，因為在本文中，我們將學習一個非常特定的函數，稱為CSS中的cube-bezier()函數 。 你們中的大多數人可能已經知道此功能是什么，其行為是什么以及它如何有所幫助。 但是，如果您甚至根本不了解此功能，那么本文僅適合您。 因此，請繼續閱讀，有關CSS中的cube-bezier()函數的一切都將向您清楚。
Description:
描述：
First and foremost, let us start with the definition of the cubic-bezier function and get a gist about it.
首先，讓我們從三次貝塞爾函數的定義開始，并深入了解它。
The cubic-bezier() function is used to denote a certain type of curve and that curve is known as the cubic-bezier curve. To plot this curve, it is mainly denoted by 4 points that could be P0, P1, P2 & P3. Here, the points P0 and P3 are representing the start and the end of the curve and these points will always be fixed.
cube-bezier()函數用于表示某種類型的曲線，該曲線稱為三次貝塞爾曲線。 為了繪制該曲線，主要由4個點表示，可以是P0 ， P1 ， P2和P3 。 在這里，點P0和P3代表曲線的起點和終點，這些點將始終是固定的。
Implementation:
實現方式：
Now, that we have understood the definition of this function, let us explore further: this function is majorly used with two properties and those properties are animation-timing-function property and transition-timing-function property.
現在，我們已經了解了此功能的定義，讓我們進一步探討：該功能主要用于兩個屬性，而這些屬性是“ 動畫定時功能”屬性和“ 過渡定時功能”屬性。
With the help of the syntax, you will get a clear idea about the implementation of this function.
借助語法，您將對該功能的實現有一個清晰的了解。
Syntax:
句法：
element{
transition : cubic-bezier(x1,y1,x2,y2);
}
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
.cubic-bezier {
transition: width 1.5s cubic-bezier(0.74, 0.15, 0.43, 1.5);
background: pink;
width: 180px;
height: 150px;
margin: 100px;
text-align: center;
}
.cubic-bezier:hover {
width: 70%;
}
</style>
</head>
<body>
<div class="cubic-bezier">cubic-bezier() function</div>
</body>
</html>
Output
輸出量
Hover over the div in the above example to see the effect of this function.
將鼠標懸停在上面的示例中的div上可以查看此功能的效果。
Conclusion:
結論：
This was all about the cubic-bezier() function in CSS. Make sure that you use this function wisely as this function can prove to be a very good tool for styling. So, go ahead and have fun with the new learned function. Make sure that you use the above-mentioned properties while using this function on your website or web page.
這一切都與CSS中的cube-bezier()函數有關 。 確保明智地使用此功能，因為此功能可以證明是樣式設計的非常好工具。 因此，繼續學習新功能吧。 在網站或網頁上使用此功能時，請確保使用上述屬性。
翻譯自: https://www.includehelp.com/code-snippets/cubic-bezier-function-with-example-in-css.aspx
cubic-bezier
)
