Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>animated div</title>
    <style>
#ball {
position:absolute;
top:100px;
left:10px;
height:100px;
width:100px;
border-radius:50px;
background:-webkit-radial-gradient(30% 30%, white, red 10%, black)
}
    </style>
</head>
<body>
<input type="button" value="Animate" onclick="document.getElementById('ball') .className='bounce'; " />
<input type="button" value="Pause" onclick="document.getElementById('ball') .style.webkitAnimationPlayStare='paused'; " />
<input type="button" value="Animate" onclick="document.getElementById('ball') .style.webkitAnimationPlayStare='running'; " />
<p>
<div id="ball">

</div>
</body>
</html>