mardi 21 avril 2015

How to create CSS3 bounce effect

I am trying to create bounce effect with pure css. I have following code

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

What I want is a bounce effect at the end of the animation without using any 3rd party code or js. I have no idea of how to do this.

Aucun commentaire:

Enregistrer un commentaire