Animieren eines CSS-Gradientenrandes

Dieser kleine Trick für Farbverlauf-Ränder ist super nützlich

.border-gradient {
  border: 5px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}

Hier sind einige grundlegende Demos aus unserem Artikel zu diesem Thema. Sephanie Eckles hat die Idee mit weiter verbreitet und mehr Details geliefert. Bramus Van Damme hat das gesehen und etwas erweitert, indem er einen Winkel zum Gradienten hinzugefügt und dann animiert hat. Wie

div {
  --angle: 0deg;
  /* … */
  border-image: linear-gradient(var(--angle), green, yellow) 1;
  animation: 10s rotate linear infinite;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

Aber warte! Das wird so nicht wirklich animieren. Der Browser weiß nicht, dass 360deg ein tatsächlicher Winkelwert ist und nicht nur ein zufälliger String. Wenn er wüsste, dass es ein Winkelwert ist, könnte er ihn animieren. Also sag es ihm

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

Siehe Bramus' Artikel für die dortigen Demos. Ein echter CSS-Trick. Ich kann die weitere Unterstützung für @property (nur Chrome, zum Zeitpunkt des Schreibens) kaum erwarten, da sie wirklich einige coole CSS-Tricks ermöglicht. Zum Beispiel das visuelle Animieren von Zahlen.

Direkter Link →