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

3. thecoody

   thecoody hat kostenlosen Webspace.

   15:24, 27.2.2021

   Hallo mehralsnurradio,
   
   leider kann ich dein Bild nicht aufrufen. Was genau möchtest du denn animieren?
   
   Hilft es dir eventuell bereits, die Werte der Animation (Sekunden und steps) zu ändern?
   
   

   animation: play 3s steps(10) infinite;

   
   
   Könntest du bitte etwas detaillierter das Problem beschreiben?
   
   Beste Grüße!
   
4. Autor dieses Themas

   mehralsnurradio

   mehralsnurradio hat kostenlosen Webspace.

   11:18, 9.3.2021

   Danke noch für die späte Antwort!
   Ich hatte das schon gelöst, das Bild war breiter als 60*256 daher musste ich die 16384 anpassen. Ich hatte wohl nicht darauf geachtet dass 16384 durch 256 = 64 ist.
   Kann geschlossen werden
   
   Beitrag zuletzt geändert: 9.3.2021 11:20:52 von mehralsnurradio

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

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

Dir gefällt dieses Thema?