🏀 CSS Bounce
Tags: css, html, beginners, codepen
Published: 2020-04-22 13:43:45

## Hello everyone 👋

Css3 is full of surprises. There are lots of things we can create by just plain CSS.

> Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language

<hr>

### But today we will talk about **CSS Animations**
They are fun, for sure 👏

One of the cool feature is cubic-bezier() 

### But What is  cubic-bezier()  ?

> The cubic-bezier() function defines a Cubic Bezier curve.

> A Cubic Bezier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve and, in CSS these points are fixed as the coordinates are ratios. P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.

> The cubic-bezier() function can be used with the animation-timing-function property and the transition-timing-function property.

Syntax: 


| Value       | Description                                                      |
| ----------- | ---------------------------------------------------------------- |
| x1,y1,x2,y2 | Required. Numeric values. x1 and x2 must be a number from 0 to 1 |

Read more at [W3schools](https://www.w3schools.com/cssref/func_cubic-bezier.asp)


### Example 

> Lets take a look at a quick example of using ``` The cubic-bezier() ``` function.

<hr>

1. **Html code 👇**

```html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="style/main.css">
    <title>Home | Jayesh</title>
</head>

<body onload = "AutoRefresh(4000);">

    <div class="container">
        <div class="bounce-top"> 
            <img src="img/dribbble.svg">
        </div>
    </div>

    <footer>
            <p>crafted with ❤ by <a href="https://wwww.instagram.com/jayesh.2112">jayesh</a> </p>
    </footer>

</body>
<!-- script to reload page after every 4sec to let you see ball bounce 😉 -->
 <script>
        
            function AutoRefresh( time ) {
               setTimeout("location.reload(true);", time);
            }
         
 </script>

</html>
```


2. **Css code 👇**

```scss

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.container {
    width: 20vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-bottom: 4px dashed rgba(0, 0, 0, 0.651);

    img {
        position: relative;
        left: 100px;
        height: 120px;
        width: 120px;
    }

}

.bounce-top {
    -webkit-animation: bounce-top 1.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) both;
    animation: bounce-top 1.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) both;
}


@keyframes bounce-top {
    0% {
        -webkit-transform: translateY(-95px);
        transform: translateY(-95px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1;
    }

    24% {
        opacity: 1;
    }

    40% {
        -webkit-transform: translateY(-44px);
        transform: translateY(-44px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    65% {
        -webkit-transform: translateY(-18px);
        transform: translateY(-18px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    82% {
        -webkit-transform: translateY(-9px);
        transform: translateY(-9px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    93% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    25%,
    55%,
    75%,
    87% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    100% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

// credentials
footer {
    position: absolute;
    top: 70%;
    left: 45%;
    color: rgb(136, 136, 136);
    font-family: 'Helvetica';
    
    a{
        text-decoration: none;
        color: rgb(136, 136, 136);

        &:hover {
            color: rgb(255, 0, 98);
            transition: 0.5s;
        }
    }
}

```

### After running all code you will see something like this.

![Bounce](https://res.cloudinary.com/techlead/image/upload/v1587731830/Dev.to%20posts/zus49zfs9rtmxe8kyx9j.gif)

I have created this pen on [Codepen](https://codepen.io/mindset-2112/pen/ZEbBNJm) also

_sorry guys, it's not responsive._ 😬

<hr>

**Well that's it** 

### Check out my posts too 🥂
* [Do this before any JS framework 👩‍💻](https://dev.to/mindset/do-this-before-any-js-frameworks-43ji) 
* [Top Developer Mindset 🥇](https://dev.to/mindset/post-1-4kb0)
* [Css 3D shapes 📐](https://dev.to/mindset/dark-secrets-of-css-shapes-1phf)

<hr>

**Stay Home 🏡, Stay Safe 💊**

**Author:**  [_Jayesh 🧡_](https://www.instagram.com/jayesh.2112)