Simple animation using Css3

Question

How can I make an HTML element like a circle act as if it was bouncing, like move it multiple times? is it possible with only CSS3?

Answer 1

I think the easiest way to do this is using animate.css, support a lot of different animation, if you want to quickly add animation, it is a very good choice, and here is simple game which developed by animate.css, http://www.gbin1.com/technology/democenter/20120812-animate-css/index.html

Answer 2

Yep, you'll need to use keyframe animations to do this. Here's a simple example:

HTML:

<div class="bounce"></div>

CSS:

@-webkit-keyframes hop {
       from{
        -webkit-transform: translate(0px,0px);
        }


         to {
        -webkit-transform: translate(0px,-30px);
        }  
      }

@-moz-keyframes hop {
       from{
        -moz-transform: translate(0px,0px);
        }


         to {
        -moz-transform: translate(0px,-30px);
        }  
      }

.bounce{
    display:block;
    height:200px;
    width:200px;
    background:#ff6600;
    border-radius:300px;
    margin-top:100px;
-webkit-animation-name: hop;
    -webkit-animation-duration:.3s;
     -webkit-animation-direction:alternate;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-name: hop;
    -moz-animation-duration:.3s;
     -moz-animation-direction:alternate;
    -moz-animation-timing-function:linear;
    -moz-animation-delay:0s;
    -moz-animation-iteration-count:infinite;
}

And a Fiddle for your viewing pleasure: http://jsfiddle.net/hpBhf/1/