Understanding Cubic Bezier in CSS

Sanjay Pandey

Sanjay Pandey

The transition-property present in CSS is utilized to apply impact on hovering over an element present on your page. This property is very important as it applies various kind of effects on your page, thus making it attractive.

The transition-property is a shorthand property used to speak to up to four transition-related longhand properties:

.example {
    transition: [transition-property] [transition-duration] [transition-timing-function] 

These transition properties enable components to change esteems over a predetermined term, vitalizing the property changes, instead of having them happen promptly.

Here is a straightforward precedent that transitions the foundation shade of a <div> element on :hover:

div {
  transition: background-color 0.5s ease;
  background-color: red;
div:hover {
  background-color: green;

The example above creates an animation like effect in which upon hovering your mouse pointer over the particular defined <div> creates an effect in which the <div> changes its background color.

You can specify a particular property as we have above, or use a value of “all” to refer to transition properties.

div {
  transition: all 0.5s ease;
  background: red;
  padding: 10px;
div:hover {
  background: green;
  padding: 20px;

The example above just like the previous one creates an animation like effect where the particular <div>  changes its background color as well as its padding.

But, in this example, both the padding as well as its background changes its properties within the same time frame and delay.

In order to avoid this and apply effects on particular properties individually, you may comma separate value sets to do different transitions:

div {
  transition: background 0.2s ease,
              padding 0.8s linear;

Timing-function Options in CSS

Some standard timing-function options are ease, ease-in, ease-out, ease-in-out, linear. Besides these, one can even specify a cubic-bezier inside the timing-function property.

These standard options are alright, but if you want your animations to be the best they can be, you need to understand your cubic-bezier. How an animation eases is a good way to set a tone, and even distinguish a brand.

If you don’t animate intuitively your product won’t “feel” right.

Think about how Apple adds polish to their products by meticulously choosing how their animations look.

I’m a visual-spatial kinda guy, so I needed to find a tool so I could make these bezier-curves with ease. So, say hello to www.cubic-bezier.com.

This website tool helps us build a bezier-curve using graphical representations with much ease, rather than calculating all the values by themselves. While the transition-property in itself is quite useful but the way the property can be used is vast.

So, keep practicing and until next time.

Are you in a search of a mobile app development company?

Do you have an app idea that can create marvels? You would need the assistance of an app development company and your search comes to an end with Terasol Technologies. Whether it is Android or iOS, we have expertise in both segments. Just scroll through our website and get to know about our previous work.

What’s your challenge? Let’s solve it with technology. Contact Us Now.

Share on facebook
Share on twitter
Share on linkedin

Related Posts