css3_animation.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3 animation</title>
<link href="" rel="stylesheet">
<style type="text/css">
.wrap
{
	position: relative;
	height: 200px;
	width: 200px;
	margin:100px auto;

	perspective:200;
	-webkit-perspective:200; 
	
	/* Safari and Chrome */
}

.ball-state:checked ~ .ball{
	animation-play-state: paused
	}



.ball
{
	width:100px; height:100px;  border-radius:50%;
	background: radial-gradient(circle at 20% 20%, #F90 , #F03);
	
	animation:falldown 2s ease-in-out infinite alternate;
	animation-fill-mode: forwards;
}	

@keyframes falldown{
	0%   { transform: translateY(0)      }
	100%  { transform: translateY(600px)  }
	}






</style>


</head>
<body>

<div class="wrap">


	<input type="radio" name="ball-paused" class="ball-state"  />paused 
	<input type="radio" name="ball-paused" />play



	<div class="ball"></div>
</div>


</body>

</html>