Wie erstelle ich eine responsive Sprite-Sheet-Animation in CSS?

Ich versuche das schon seit Stunden, aber bisher bin ich nicht weitergekommen.

Ich habe eine Website mit ein paar Animationen, einige werden beim Klicken und andere beim Hover aktiviert. etwas Ähnliches wie die Animation auf dieser Website: http://www.pixelwrapped.com/ Der Katzenschwanz reagiert, wenn Sie den Browser skalieren, skaliert er auch mit.

Dies ist der Code, den ich verwende, um die Animation zu erstellen

.monster {
            position: absolute;
            width: 100px;
            height: 100px;
            margin: 2% auto;
            background: url('img/le-cloud.png') left center;
            overflow: auto;
            display: block;
            left: 20%;
            top: 40%;

        }
        .monster:hover {
            position: absolute;
            width: 100px;
            height: 100px;
            margin: 2% auto;
            background: url('img/le-cloud.png') left center;
            animation: play .9s steps(18);
            overflow: auto;
            display: block;
            left: 20%;
            top: 40%;

        }

Ich habe dieses Tutorial gefunden , das Prozentsätze verwendet, das funktioniert, um 1 Frame zu ändern und nicht die gesamten 18 Frames in diesem Beispiel abzuspielen. Ich habe andere Animationen, die aus mehr als 30 Sprites bestehen. Ich habe mir spritely.js angesehen, aber es reagierte nicht.

Irgendwelche Ideen, wie ich das lösen kann?

Diese Frage scheint nicht zum Thema zu gehören, da sie viel besser zu Stack Overflow passt .
Auf Ihrer Beispielseite (pixelwarped.com) wird der animierte Schwanz ausgeblendet, sobald das Bild zu schrumpfen beginnt. Das bedeutet, dass es sich nicht wirklich um eine responsive Animation handelt. Es scheint, dass sie es so gemacht haben, weil es schwierig wäre, das kleine Spritesheet-Bild im Verhältnis zum größeren Bild dahinter zu skalieren, während der Schwanz die ganze Zeit in der richtigen Position bleibt.
Also sind Medienabfragen die einzig mögliche Lösung, denke ich, nur 3 verschiedene Größen zu machen
Vielleicht nicht die einzige Lösung, aber die beste, die mir einfällt.
Vielen Dank für den Vorschlag, ich habe auch an Gifs gedacht. Haben Sie eine Vorstellung von Vor- und Nachteilen oder ob es überhaupt funktionieren wird?
@Vincent Ich habe es in Stackoverflow gepostet, obwohl dort niemand geantwortet hat. Korrigieren Sie mich, wenn ich falsch liege. Es greift auf Animationen zurück, also habe ich es hier gepostet, da ich zuvor nach dem Thema gefragt habe.
Ja, die Linien sind ziemlich verschwommen, und Sie werden hier zumindest mehr Aufmerksamkeit bekommen.
Überprüfen Sie die Antwort, ich habe herausgefunden, wie!
Nebenbemerkung: Sie müssen nicht alle Ihre Eigenschaften im :hoverZustand wiederholen. Sie müssen nur diejenigen haben, die Sie vom Anfangszustand ändern
Ich wähle dies als Off-Topic, da es bei der gesamten Lösung um die Verwendung von CSS geht. Glauben Sie immer noch, dass es auf StackExchange gehört.
Ich stimme dafür, diese Frage als nicht zum Thema gehörend zu schließen, da es anscheinend nicht um Grafikdesign innerhalb des in der Hilfe definierten Bereichs geht.

Antworten (2)

Irgendwann habe ich herausgefunden, wie es geht! Nur für den Fall, dass es noch jemanden interessiert, lassen Sie mich etwas erklären, damit Sie nicht das durchmachen, was ich durchgemacht habe:

    <style>
      div.sprite {
            margin: 0 auto;
            width: 40%;
/*            Change this to what ever value you desire*/
            height: 0;
            padding-bottom: 40%;
            background-image: url("le-cloud-copy.png");
/*            Add the sprite sheet here, must be on a staright line*/
            background-position: 0 0;
            background-size: 1800%;
/*            I have 18 sprites in the sheet thus it's 1800%, if it was 4 you'd use 400% and so on*/
            display: block;
        }
        div.sprite:hover {
/*            background-position: 500% 0;*/
            animation: play .9s steps(18);
/*            18 steps to go over al the sprites i have, if you had 4 in the sprite the value would be 4 for example */
        }
        @keyframes play {
            100% {
                background-position: 1800% 0;
            }
        }
    </style>

Und das Wunderbare daran ist , diese Bibliothek einzuschließen, und das sollte funktionieren.

<script src="js/prefixfree.min.js"></script>
Das Einschließen von prefixfree für etwas, das Sie ziemlich einfach in CSS tun können, scheint übertrieben zu sein: P Wenn Sie es bereits für andere Dinge einschließen, ist es möglicherweise in Ordnung, aber es für etwas so Kurzes zu empfehlen, ist eine schlechte Übung

Versuchen Sie es mit Transformationen scaleund allen Haltepunkten, die Sie benötigen. Es wird in IE9 und höher unterstützt, aber Sie können in IE < 9 emuliert werden, indem Sie das zoomEigentum von Microsoft verwenden. Andere sind (nicht ohne weiteres) mit dem MS-Matrix-Filter möglich.

@media(max-width:1024px){
   .monster {
       transform:scale(0.5);
   }
}
Die Verwendung scalefür responsives Design ist eine schlechte Praxis.
@Zach Saucier - Interessanterweise sprechen Sie in Ihrem CSS-Animationsartikel über CSS-Tricks über Responsive und die Verwendung von Skalierung, scheinen aber nicht zu erwähnen, dass es sich um eine schlechte Praxis handelt. Können Sie das näher erläutern? „Leider werden Prozente von keinen Box-Shadow-Eigenschaften unterstützt, sodass sie nicht so einfach reagieren wie ein natives HTML-Element. Sie können jedoch immer noch manuell in einer Animation oder durch die Verwendung von transform:scale(n) auf dem eigentlichen HTML-Element geändert werden von denen sie ein Teil sind."
@Zach Saucier - Es wäre schön, wenn srcset tatsächlich von mehr als nur Web-Kit unterstützt würde. Ich habe Skalierung verwendet und keine Unschärfe festgestellt. Haben Sie ein Beispiel? Wollen Sie sagen, dass dies passiert, wenn Sie die Größe des Browsers oder von Desktop auf Handy ändern? Wenn die Größe des Browsers geändert wird, ändern die meisten Benutzer (99,9 %) die Größe des Browsers nicht so, wie wir es beim Testen tun.
Nach etwas mehr Nachdenken: Die Verwendung scale()für Bilder ist in Ordnung, solange 1) der Skalenwert kleiner als 1 ist (mehr als 1 ist immer unscharf), 2) das Bild absolut positioniert ist (so dass der Unterschied in Begrenzungsrahmen und visuellem Erscheinungsbild spielt keine Rolle), 3) die Leistung spielt keine große Rolle (es wäre am besten, ein kleineres Bild zu laden, wenn nur ein kleineres Bild benötigt wird) und 4) wenn es mit anderen Transformationen gepaart wird, muss es stark sein getestet, da Browser Probleme mit bestimmten Arten von Transformationen haben, insbesondere wenn sie miteinander gepaart sind
Wie erstelle ich eine responsive Sprite-Sheet-Animation in CSS?
AntwortenHierDatenschutz-Bestimmungen1y, 0v