# cubic-bezier() Function with Example in CSS

**CSS | cubic-bezier() function**: Here, we are going to learn about the **cubic-bezier() function with its syntax, examples in CSS** (Cascading Style Sheet).

Submitted by Anjali Singh, on February 19, 2020

**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.

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**.

**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.

**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.**

**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.

TOP Interview Coding Problems/Challenges

- Run-length encoding (find/print frequency of letters in a string)
- Sort an array of 0's, 1's and 2's in linear time complexity
- Checking Anagrams (check whether two string is anagrams or not)
- Relative sorting algorithm
- Finding subarray with given sum
- Find the level in a binary tree with given sum K
- Check whether a Binary Tree is BST (Binary Search Tree) or not
- 1[0]1 Pattern Count
- Capitalize first and last letter of each word in a line
- Print vertical sum of a binary tree
- Print Boundary Sum of a Binary Tree
- Reverse a single linked list
- Greedy Strategy to solve major algorithm problems
- Job sequencing problem
- Root to leaf Path Sum
- Exit Point in a Matrix
- Find length of loop in a linked list
- Toppers of Class
- Print All Nodes that don't have Sibling
- Transform to Sum Tree
- Shortest Source to Destination Path

Comments and Discussions