Animieren der `content`-Eigenschaft

Wussten Sie, dass Sie die `content`-Eigenschaft von Pseudo-Elementen animieren können? Laut der Liste der animierbaren Eigenschaften in der Spezifikation sollten Sie das nicht können, aber in der neuesten Version von Desktop Chrome können Sie es. Die folgende Demo sollte von "A" nach "B" animieren, indem die `content`-Eigenschaft innerhalb einer `@keyframes`-Animation geändert wird.

Der Code

Um eine Buchstabentausch-Demo wie die obige zu erstellen, erstellen wir ein leeres <div>, das wir mit dem content seines Pseudo-Elements füllen werden, wie folgt:

<div class="letter-changer"></div>

Und dann setzen wir den content seines Pseudo-Elements so, dass er sich ändert, wie wir es mit jeder anderen CSS-Eigenschaft tun würden, indem wir eine neue `@keyframes`-Animation erstellen und sie mit der `animation`-Eigenschaft einrichten.

@keyframes changeLetter {
  0% {
    content: "A";
  }
  50% {
    color: white;
  }
  100% {
    content: "B";
  }
}

.letter-changer::after {
  animation: changeLetter 3s linear infinite alternate;
}

Könnte das nützlich sein?

Die Tatsache, dass es in den meisten Browsern nicht funktioniert und nicht standardisiert ist, macht die Verwendung etwas riskant. Aber es gibt ja auch das ganze "Paving-Cowpaths"-Ding (d. h. wenn es offensichtlich nützlich ist, *könnte* es standardisiert werden).

In einem Beitrag letzte Woche beschrieb ich eine Methode zum Inkrementieren der Zahlen in einer Ladeleiste. Sie verwendete genau dieses Konzept, um die Zahlen zu inkrementieren. Hier ist ein weiteres Beispiel in diesem Sinne: ein Countdown!

Browser-Unterstützung

Bei meinen eigenen Tests hat die Animation von content *nur* im stabilen Desktop Chrome (v46 zum Zeitpunkt des Schreibens) funktioniert. Überall sonst keine Unterstützung. Kein Safari auf dem Desktop oder iOS. Kein Firefox. Kein IE. Jeder dieser Browser ignoriert die Animation und zeigt nur den ursprünglichen content im Pseudo-Element an.

Es könnte ein praktischer Trick in ferner Zukunft sein *oder* es könnte nie von irgendetwas unterstützt werden. Nicht standardisierte Funktionen laufen immer Gefahr, veraltet zu werden, daher könnte diese Chrome-Unterstützung nicht ewig andauern.

Erneuter Blick auf die Browserunterstützung im September 2017: Funktioniert in Chrome/Mobile, Firefox und Opera, aber nicht in IE, Edge oder iOS.

Erneuter Blick auf die Browserunterstützung im Oktober 2020: Edge wurde zu Chrome, das ist also gelöst. IE-Unterstützung wird immer seltener. Immer noch keine iOS-Unterstützung.

Wenn Sie Inhalte auf eine browserübergreifende Weise ändern müssen

Verwenden Sie JavaScript.