How to create CSS3 bounce effect


Tags: css,css3,css-transitions,css-animations

Problem :

I am trying to create a bounce effect at the end of the animation without using any 3rd party code or javascript. I have no idea of how to do this only using pure CSS.

Here is what I have so far:

HTML:

<div></div>
<div></div>
<div></div>

CSS:

div {
    background:  tomato;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    transition: transform 0.3s ease-in;
    transform-origin: top left;
}
div:hover { 
    -webkit-transform: scale3d(5, 5, 5);
    transform: scale3d(5);
}

DEMO



Solution :

If all you need is a very simple bounce, it's as easy as just changing the transition function from ease-in to something else, such as a cubic-bezier.

An example of a cubic-bezier function that bounces would be

cubic-bezier(0.175, 0.885, 0.32, 1.275)

A full example:

div {
    background:  tomato;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: top left;
}
div:hover {
    -webkit-transform: scale3d(5, 5, 5);
    transform: scale3d(5);
}
<div></div>
<div></div>
<div></div>

You can find a few examples of other easings at easings.net, or a full cubic-bezier editor at cubic-bezier.com.


    CSS Howto..

    How to use css animate correctly?

    CSS - How to add a glow effect around a fluid box?

    How to determine the 'toggle' status of a CSS toggle input?

    How to add schedule elements into this calendar?

    How to make liquid layout in css using em?

    How to stretch text in CSS like microsoft word?

    How can I get these two divs to appear close to each other vertically?

    How to use CSS first-child but excluding text content

    How to apply CSS to other elements except the hovered one?

    How to auto-adjust size of other input fields while typing into input field #1?

    How to trigger one element inside a div on mouse hover in CSS

    How do I put my content in a box?

    How to use jQuery to find a certain string within a div, and then apply specific styles to another div if it exists? [closed]

    How to set HTML table cell to inherit its size?

    How to indent text in a select drop down menu using CSS

    How to scroll a fixed div when I resize the browser window

    How to fade out after hover is done using CSS

    How to get the type word inside the input field once after pressing the Comma key and not after pressing space bar

    How to “break line” via CSS?

    how to hide the content of the div in css

    How to add a new rule to an existing CSS class

    How to have a background image properly fade in with CSS

    how to vertically center align div elements with contents other than text

    how to align button radio in css

    how to make background css url dynamic using jquery

    How to add a hover transition effect on the navigation?

    how to change to color of pseudo-elements in css through jquery

    How do I make a absolute positioned div have a width equal to it's parent minus some margin

    “ul li a:link, a:visited” and “ul li a, visited” how they different?

    How to position label text with css