kostenloser Webspace werbefrei: lima-city

Sprite Animation fehlerhaft

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   mehralsnurradio

   mehralsnurradio hat kostenlosen Webspace.

   19:09, 26.1.2021

   Ich möchte eine Sprite Animation erstellen, wo eine Karte animiert wird.
   Das Problem ist, dass die Animation zwar funktioniert, parallel aber die ganze Karte dauernd von rechts nach links läuft.
   

   <div id="background-animated"></div>
   
   <style>
   #background-animated{
     width: 256px;
     height: 256px;
     background-image: url(...);
     position: absolute;
     background-position: 0px 0px;
     left: 0px;
     top: 0px;
     animation: play 2s steps(60) infinite;
   }
   
   @keyframes play {
   100% { background-position: -16384px; }
   }
   
   </style>

   Das Bild: https://fumoc.de/img/animation/TOTY_ATT_LEGEND.png

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?