CSS-Rahmenanimationen

Verschiedene Möglichkeiten zum Animieren von Rahmen in CSS

Bramus

Rahmenlinien festlegen

Es gibt verschiedene Methoden, um einen Rahmen für ein Element festzulegen: border, outline und box-shadow. Wie in The 3 CSS Methods for Hinzufügen von Element Borders von Stephanie Eckles beschrieben, hat jeder Ansatz seine eigenen Vor- und Nachteile, insbesondere bei Animationen der Rahmen. Der Hauptgrund dafür, kein korrektes CSS-border zu verwenden, ist für Animationszwecke.

Vor Kurzem habe ich auf einen Artikel aufmerksam gemacht, der Fantastische CSS-Rahmenanimation, in dem der Autor Coco weitere Optionen untersucht. Durch das Einfügen von generierten Inhalten mithilfe von ::before und ::after entsteht ein imitierter Rahmen, der dann animiert wird.

Was mir besonders auffällt, sind die unterstützenden animierten Visualisierungen im Artikel. Sie helfen wirklich zu erklären, was genau getan wird, um den gewünschten Effekt zu erzielen.

Sowohl die weiße Ebene als auch die farbigen Linien sind generierte Inhalte. Durch das Ein- und Ausblenden der weißen Ebene wird deutlich, wie sie gestapelt sind und wie die Animation funktioniert.

Beibehaltung des Boxmodells

Die Verwendung von generierten Inhalten zur Nachahmung eines Rahmens hat jedoch den Nachteil, dass am Ende ein fehlerhaftes Box-Modell entsteht. Der Inhalt kann nun den falschen Rahmen verdecken, da der „Rahmen“ darunter dargestellt ist. Um das Problem zu beheben, müssen Sie die gewünschte border-width als padding anwenden.

Um einen echten Rahmen zu erhalten und damit den Funktionalitäten des Boxmodells beizubehalten, können Sie mehrere Hintergründe verwenden, die Sie dann im Rahmenbereich ausdehnen.

Grundlagen

Erstellen wir zunächst einen gepunkteten Rahmen und fügen Sie die verschiedenen Hintergründe hinzu.

/* Size of the border */
--border-size: 0.5rem;

/* Create a dotted border */
border: var(--border-size) dotted lime;

/* Create two background layers:
   1. A white semi-transparent
   2. A layer with the colored boxes
 */
background-image:
  linear-gradient(to right, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)),

  conic-gradient(
    from 45deg,
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  )
;

Größe der Hintergründe mit background-origin festlegen

Wie Sie sehen, passiert hier auf den Hintergründen etwas Lustiges: Sie sind in den Rahmen gemalt, aber conic-gradient scheint ganz falsch zu sein. Das ist das gewünschte Verhalten: Standardmäßig werden Hintergrundbilder nicht in den Rahmen gezeichnet, da ihr Ursprung von der padding-box des Elements ausgeht. Schließlich werden die Hintergrundbilder im Rahmen wiederholt, wodurch der seltsame visuelle Effekt entsteht.

Um dieses Problem zu lösen, müssen Sie den Hintergrund so weit strecken, dass er auch die Rahmengröße einnimmt. Du kannst dies manuell tun, indem du den Hintergrund dehnst und neu positionierst. Am besten verwendest du aber die Eigenschaft background-origin, um die Größe des Hintergrunds an border-box anzupassen.

/* Manually add or offset the size of the border where needed */
background-position: calc(var(--border-size) * -1) calc(var(--border-size) * -1);
background-size: calc(var(--border-size) * 2 + 100%) calc(var(--border-size) * 2 + 100%);

background-origin: border-box;

Durch diese Neuerung sieht alles viel besser aus:

Die Ebene mit dem weißen Hintergrund wird mit background-clip verkleinert

Da die Hintergründe jetzt die gesamte Fläche einnehmen, muss die halbtransparente Ebene wieder verkleinert werden. Anstatt noch einmal an background-size zu suchen, gibt es eine einfachere Möglichkeit: Verwende background-clip und setze es auf padding-box. Auf diese Weise wird der Hintergrund nicht mehr unterhalb des Rahmenbereichs gezeichnet.

background-clip:
  padding-box, /* Clip white semi-transparent to the padding-box */
  border-box /* Clip colored boxes to the border-box (default) */
;

Als Letztes fügen Sie den Rahmen transparent hinzu, um die volle Wirkung zu erzielen.

border: 0.3rem dotted transparent;

Animation

Wenn Sie die Rahmenanimation wiederherstellen möchten, können Sie den Startwinkel von conic-gradient ändern.

--angle: 0deg;
conic-gradient(
  from var(--angle),
  #d53e33 0deg 90deg,
  #fbb300 90deg 180deg,
  #377af5 180deg 270deg,
  #399953 270deg 360deg
);

Dank @property wird dies in Browsern, die diese Funktion unterstützen, zum Kinderspiel:

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

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

Zusammen ergeben daraus folgende Code-Elemente:

Bonusinhalte: border-image

Ein bereits behandelter Ansatz zum Zeichnen eines Farbverlaufsrahmens ist die Verwendung von CSS border-image.

Sie ermöglicht einfacheren Code, da Sie sich nicht mit überlappenden Hintergründen auseinandersetzen müssen. Animationen können wie zuvor angewendet werden.

/* Create a border */
border: 0.5rem solid transparent;

/* Paint an image in the border */
border-image:
  conic-gradient(
    from var(--angle),
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  ) 1
;

Sie werden jedoch feststellen, dass einige Dinge bei diesem Ansatz nicht mehr funktionieren:

• Das border-image folgt nicht dem border-radius; es bleibt immer rechteckig.
• Wenn Sie border-image-slice als Füllung festlegen, wird border-image nicht unter der Gruppe background sondern darüber dargestellt. Dies kann lästig sein, wenn der Hintergrund halbtransparent sein soll.

Zum Abschluss

In CSS gibt es eine Vielzahl von Möglichkeiten zum Animieren von Rahmen. Je nach Anwendungsfall können Sie sich auf das eine oder das andere konzentrieren.