<div class="ortala"><h1>Css  sprite resim ile animasyon yapımı | Css Sprite Animation</h1></div>
<div class="karakter"></div>
<h1 style="float:right; margin-right:25px"><a href="keremozer.com">keremozer.com</a></h1>
@import url(https://fonts.googleapis.com/css?family=Philosopher);
body,a{
  font-family : Philosopher;
  text-decoration:none;
  color: #343d46;
}

.ortala{
  margin: 0 auto;
}
.karakter{
  margin:0 auto;
   width: 60px; height: 95px;
  background-image: url('http://i59.tinypic.com/jpkk6f.jpg');
  animation: oynat 1s steps(7) infinite;
  
}
@keyframes oynat {
   from { background-position: 0px; }
    to { background-position: -420px; }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.