How to create CSS3 bounce effect

Question

I am trying to add a bounce effect to the end of the animation without using any 3rd party code or javascript. I managed to create the animation but could not achieve the bounce effect.

This is what I have done so far:

div {
  background: tomato;
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  transition: transform 0.3s ease-in;
  transform-origin: top left;
}

div:hover {
  transform: scale3d(5);
}

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

DEMO

Answer 1

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.