Eine transparente Figurenanimation in deine Website einbauen

Bei transparenter Website-Animation scheint die Seite selbst durch. Ein in jeden Frame eingebranntes schwarzes, weißes, grünes oder schachbrettartiges Rechteck verhindert diesen Effekt.

Diese Anleitung nutzt einen echten AnimGen-WebM-Alpha-Export, kein nachgebautes GIF. Öffne die Browserdemo, lade das vollständige HTML-Beispiel und teste dieselben Dateien in deinem Zielbrowser.

Das Ergebnis vor dem Kopieren ansehen

Die Demo platziert ein Figurenvideo über einem hellen Panel, einem dunklen Panel und einem Hero-Farbverlauf. Drei Hintergründe machen Transparenz sofort sichtbar und zeigen Kantenprobleme, die vor einer günstigen Farbe verschwinden können.

Das genaue Beispiel:

Wir decodierten alle 96 Frames mit libvpx; Alpha reicht von 0–255. Anschließend öffneten wir die Seite in Chrome 152.0.7977.84 auf macOS 26.5.2 und beobachteten drei laufende Videos, durch deren transparente Pixel die Hintergründe sichtbar blieben. Auch eine kompakte Viewportbreite von 500 Pixeln wurde geprüft.

Das sind Ergebnisse für diese Datei und Umgebung. Normale WebM-Unterstützung beweist nicht WebM Alpha. MDNs Videocodec-Anleitung weist darauf hin, dass Safari Alpha in VP8/VP9 nicht unterstützt. Behandle die Browserliste deiner Website als zu prüfende Produktanforderung, nicht als Annahme.

Mit getrenntem WebM und PNG beginnen

Bewahre Animation und statischen Ersatz als zwei echte Assets auf:

public/
└── animation/
    ├── character-run.webm
    └── character-run.png

Das PNG sollte ein tatsächlicher transparenter Frame sein, kein Screenshot eines Schachbretts. Hier das Demo-Ersatzbild; das sichtbare Schachbrett stammt vom Bildbetrachter dieser Seite, nicht aus der Datei.

Nutze kein normales MP4 als Transparenz-Ersatz. MP4 und ursprüngliche Modellvorschau sind undurchsichtig. WebM Alpha, ProRes 4444, RGBA-Frames und transparente Sprites sind separate AnimGen-Exportprodukte. Die Formatanleitung erklärt ihre Rollen.

Schrittweise erweitertes HTML verwenden

Zeige zunächst das PNG. Blende das Video erst ein, wenn der Browser VP8-WebM-Wiedergabe meldet, und kehre bei Ladefehler zum PNG zurück.

<div class="animation-stage">
  <img
    id="character-fallback"
    src="/animation/character-run.png"
    width="512"
    height="512"
    alt="Blue character running"
  />

  <video
    id="character-video"
    width="512"
    height="512"
    muted
    loop
    playsinline
    preload="metadata"
    poster="/animation/character-run.png"
    aria-label="Blue character running"
    hidden
  >
    <source
      src="/animation/character-run.webm"
      type='video/webm; codecs="vp8"'
    />
  </video>
</div>

width und height reservieren das richtige Verhältnis vor dem Laden. playsinline hält mobile Wiedergabe in der Seite, muted macht Dekoration stumm und preload="metadata" vermeidet vorschnelles Laden des gesamten Videos. Die MDN-<video>-Referenz erklärt Attribute und Poster-Verhalten.

Wichtig: Inhalt innerhalb <video>...</video> ist Ersatz für Browser, die das Element nicht verstehen. Er erscheint nicht garantiert, wenn ein moderner Browser zwar <video>, aber keine Quelle decodieren kann. Ein separates benachbartes <img> mit Fehlerbehandlung deckt diesen häufigeren Fall ab.

Mit CSS über der Seite platzieren

Transparente Pixel zeigen den Hintergrund von .animation-stage:

.animation-stage {
  position: relative;
  width: min(100%, 32rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 1.5rem;
  background: linear-gradient(145deg, #7c3aed, #0891b2);
}

.animation-stage > img,
.animation-stage > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Nutze object-fit: contain, wenn die gesamte Figurenleinwand sichtbar bleiben soll. cover nur bei bewusstem Zuschnitt. CSS-drop-shadow() kann auf unruhigen Hero-Flächen helfen; prüfe Originalkanten zuerst ohne Effekte, damit Schatten keine Farbsäume versteckt.

Sicher zwischen Animation und Ersatz wechseln

canPlayType() hilft bei der ersten Auswahl, meldet aber nur Codec-/Containerunterstützung. Es beweist keine korrekte Zusammensetzung dieses Alpha-Formats.

const video = document.querySelector("#character-video");
const fallback = document.querySelector("#character-fallback");
const playButton = document.querySelector("#play-character");

function showFallback() {
  video.pause();
  video.hidden = true;
  fallback.hidden = false;
}

const canPlayWebM = video.canPlayType(
  'video/webm; codecs="vp8"'
);

if (canPlayWebM) {
  fallback.hidden = true;
  video.hidden = false;
} else {
  showFallback();
}

video.addEventListener("error", showFallback);
playButton.addEventListener("click", () => video.play());

Prüfe für wichtige Hero-/Onboarding-Inhalte echte Zielbrowser und behalte expliziten Ersatz auf Anwendungsebene. Ist Bewegung optionale Dekoration, erhält ein gutes PNG das Design, ohne die Seite zu blockieren.

Besucher über Bewegung entscheiden lassen

Auch transparentes Video bewegt sich. Eine endlose dekorative Schleife sollte nicht die einzige Möglichkeit sein, die Seite zu verstehen oder zu bedienen.

Die Download-Demo beginnt mit Poster und bietet Abspielen/Pause. Sie prüft prefers-reduced-motion; bei reduzierter Bewegung bleibt PNG sichtbar, bis jemand bewusst startet.

const reducedMotion = matchMedia(
  "(prefers-reduced-motion: reduce)"
).matches;

if (reducedMotion) {
  showFallback();
}

Ist Autoplay wirklich nötig, nutze stumm und inline, behandle ein abgelehntes play()-Promise und biete weiter Pause. Ein kurzer Clip sollte durch Loop nicht dauerhaft CPU und Netzwerk beanspruchen.

Auslieferung leicht halten

Die drei gleichzeitigen Videos dienen hier dem Alpha-Nachweis auf drei Hintergründen. Eine echte Seite braucht gewöhnlich ein Videoelement, nicht drei Decoder desselben Assets.

Vor Veröffentlichung:

1. Schneide auf tatsächlich sichtbare Bewegung zu.
2. Exportiere nahe der größten Anzeigegröße statt riesiger Quelle für kleine Karten.
3. Nutze preload="none" außerhalb des ersten Bildschirms oder bei strikt freiwilliger Wiedergabe, metadata bei früh benötigter Dauer/Größe.
4. Ergänze ein repräsentatives transparentes PNG-Poster.
5. Pausiere bei langer Laufzeit außerhalb des sichtbaren Bereichs oder in verborgenem Tab.
6. Liefere WebM als video/webm und cache unveränderliche versionierte Dateien.
7. Behalte ProRes 4444 für Schnitt/Compositing, nicht normale Inline-Webwiedergabe.

Dieses Viersekundenbeispiel ist etwa 1,54 MiB groß. Für eine gezielte Demo kann das passen; es ist kein allgemeines Budget. Messe es zusammen mit der restlichen Seite bei gedrosselter Mobilverbindung.

Schwarzes Rechteck beheben, ohne Bewegung neu zu generieren

Trenne bei Schwarzfläche Asset- und Wiedergabefrage:

1. Öffne das passende RGBA-PNG auf hellem und dunklem Hintergrund.
2. Ist PNG transparent und WebM schwarz, prüfe Browser/Decoder, exakten Codec und Compositor.
3. Sind beide undurchsichtig, prüfe Quell-Alpha, Exportmodus und eingebrannten Hintergrund.
4. Bestätige vollständige Serverdatei mit Content-Type: video/webm.
5. Wiederhole im tatsächlichen Browser, OS, Gerät und eingebetteten Webview deines Produkts.

Die Transparenz-Fehlersuche behandelt Säume, Farbübersprechen, unscharfe Kanten und vorhandenes, aber falsch angezeigtes Alpha genauer.

Animation erstellen, dann das Ziel testen

Beginne für ein Website-Asset mit echtem Alpha-PNG, wähle transparente Animation, generiere, schneide und exportiere WebM Alpha plus PNG-Ersatzframe. Der transparente Workflow erklärt Quell-/Exportgrenzen; die Lauf-/Sprung-Fallstudie behandelt Bewegung und Bereinigung.

Teste anschließend die echte Webkomponente, nicht nur die Datei, auf deinen Hintergründen und kleinster unterstützter Breite. Lade das vollständige Beispiel als Ausgangspunkt oder öffne das Studio für deine eigene Figur.