Simple HTML5 and CSS3 example

Basic Animation using CSS3 Transitions

HTML Structure:

HTML5

CSS Structure:

#animationBox {
border: 1px solid #212121;
width: 400px;
height: 200px;
position: relative;
}

#animationBox p {
width: 100px;
height: 60px;
position: absolute;
background-color: #b00;
color:#fff;
margin: 0;
padding: 40px 0 0 0;
text-align:center;
font-weight:bold;
bottom: 0;
display: block;

/*Below properties makes p tag circlular in shape*/
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;

/*Below are the properties that defines animation*/
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

/* Transform property allows us to animate the element*/
#animationBox:hover p {
-webkit-transform: translate(300px,-100px);
-moz-transform: translate(300px,-100px);
-o-transform: translate(300px,-100px);
transform: translate(300px,-100px);
}

Click Here to view the demo.