Okulsa - CSS3 Sprites Image Animation

Web Dersleri | Sadet Sevinç

<!DOCTYPE html>
<html>
<head>
	<title>Web Dersleri | Sadet Sevinç</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">	
<style type="text/css">
*{margin: 0;padding: 0;font-family: 'Open Sans', sans-serif;}
main #container {
background: #FFF;  
background: url('https://img.webme.com/pic/o/okulsa/cim.png');
background-position:left bottom;
background-repeat: no-repeat;
background-size: 30% 50%;
position: relative;
height: 117px;
width: 100%;
}
#hareket {
  background: url('https://img.webme.com/pic/o/okulsa/hareket.png');
  border: 0px solid #24AE12;
  position: absolute;
top:0;left:0;
  width: 117px;
  height: 117px;
  -webkit-animation: hareket-et 1.0s steps(6) infinite;
          animation: hareket-et 1.0s steps(6) infinite;
}
@keyframes hareket-et{
  from {
  background-position: 0;  
  }
  to {
  background-position: -702px;  
  }
}
</style>
</head>
<body>
<main>
  <div id="container">
     <div id="hareket" title="animasyon"></div>
</div>
</main>
</body>
</html>