CSS İle Animasyon Yapımı Sprite Animation

CSS de sprite bir resmimize css dışında kod kullanmadan basit bir şekilde animasyon yapıyoruz.

Burada ihtiyaçımız olan elimizde sprite bir resim bulunmasıdır.

Ben örnek olarak mario sprite'ı buldum.

gördüğünüz gibi yürüme hareketleri tek tek yanyana yapılmışdır. Burada bilmemiz gereken en önemli noktalar

1.) Resimin toplam genişliği= "420px;"

2.) Resmin yüksekliği ="95px";

3.) Herbir parçanın genişliği ="60px;"(ToplamGenişlik/ParçaSayısı)

Artık kod kısmına geçersek işte CSS kodumuz.

 .karakter{
  margin:5% auto;
  width: 60px; height: 95px; /*60 x 95 yukarıdaki hesaplama ile bulmuştuk*/
  background-image: url('http://i59.tinypic.com/jpkk6f.jpg');
  animation: oynat 1s steps(7) infinite; /*kac parca (7)*/
 }
 @keyframes oynat {
   from { background-position: 0px; }/*başlama yeri*/
   to { background-position: -420px; }/*nereye kadar resmin uzunluguna kadar*/
 }

Ve sonucumuz