CSS-Rahmenanimationen

Verschiedene Möglichkeiten zum Animieren eines Rahmens in CSS

Es gibt mehrere Methoden, um einem Element einen Rahmen hinzuzufügen: border, outline und box-shadow. Wie in The 3 CSS Methods for Adding Element Borders von Stephanie Eckles beschrieben, hat jeder Ansatz seine eigenen Vor- und Nachteile, insbesondere wenn es um die Animation der Ränder geht. Der Hauptgrund, warum keine richtige CSS-border verwendet wird, sind Animationen.

Border Animations using outline-offset von Kevin J. Powell

Ein Artikel, der mir vor Kurzem aufgefallen ist, ist Fantastic CSS border animation (Fantastische CSS-Grenzanimation), in dem die Autorin Coco weitere Optionen untersucht hat. Durch das Einfügen von generierten Inhalten mit ::before und ::after wird ein künstlicher Rahmen erstellt, der dann animiert wird.

Am auffälligsten sind für mich die unterstützenden animierten Visualisierungen, die im Artikel verwendet werden. Sie helfen wirklich zu erklären, was genau getan wird, um den gewünschten Effekt zu erzielen.

Rahmenanimationen mit von Coco generierten Inhalten

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 übereinander liegen und wie die Animation funktioniert.

Boxmodell beibehalten

Ein Nachteil der Verwendung von generierten Inhalten zur Nachahmung eines Rahmens ist, dass Sie ein fehlerhaftes Box-Modell erhalten: Die Inhalte können den gefälschten Rahmen jetzt verdecken, da dieser „Rahmen“ darunter gemalt wird. Um dies zu vermeiden, müssen Sie die gewünschte border-width als padding anwenden.

Wenn Sie einen echten Rahmen haben und damit das Box-Modell beibehalten möchten, können Sie mehrere Hintergründe verwenden, die Sie dann in den Rahmenbereich ziehen.

Grundlagen

Erstellen Sie zuerst 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, ist hier etwas Seltsames mit den Hintergründen passiert: Sie sind in den Rahmen gemalt, aber die conic-gradient scheint völlig falsch zu sein. Das ist ein beabsichtigtes Verhalten: Standardmäßig werden Hintergrundbilder nicht in den Rahmen eingezeichnet, da ihr Ursprung die padding-box des Elements ist. Um einen Rahmen zu erstellen, werden die festgelegten Hintergrundbilder im Rahmen selbst wiederholt, was zu diesem merkwürdigen visuellen Effekt führt.

Um dieses Problem zu beheben, müssen Sie den Hintergrund so strecken, dass er auch die Größe des Rahmens einnimmt. Sie können dies manuell tun, indem Sie den Hintergrund strecken und neu positionieren. Am besten verwenden Sie jedoch das Attribut background-origin, um die Größe des Hintergrunds an das border-box anzupassen.

Unterstützte Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 3.

Quelle

Don'ts
/* 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%);
Do
background-origin: border-box;

Durch diese eine Ergänzung sieht alles viel besser aus:

Weiße Hintergrundebene mit background-clip verkleinern

Da die Hintergründe jetzt den gesamten Platz einnehmen, muss die halbtransparente Ebene wieder verkleinert werden. Anstatt noch einmal mit background-size herumzuspielen, gibt es eine einfachere Möglichkeit: Verwenden Sie background-clip und legen Sie es auf padding-box fest. So wird der Hintergrund nicht mehr unter dem Bereich des Rahmens gezeichnet.

Unterstützte Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Quelle

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

Legen Sie abschließend einen Rahmen von transparent fest, um den vollen Effekt zu erzielen.

border: 0.3rem dotted transparent;

Animation

Wenn Sie die Animation des Rahmens wiederherstellen möchten, können Sie den Startwinkel des conic-gradient ändern.

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

Dank @property ist das in Browsern, die diese Funktion unterstützen, ganz einfach:

Unterstützte Browser

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Quelle

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

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

Zusammen ergibt sich daraus folgender Code:

Bonusinhalte: border-image

Wie bereits erwähnt, können Sie mit CSS border-image einen Farbverlauf für den Rahmen zeichnen.

Unterstützte Browser

  • Chrome: 16.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 6.

Quelle

Dadurch wird der Code vereinfacht, da Sie sich nicht um sich überschneidende Hintergründe kümmern müssen. Die Animation kann wie bisher 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
;

Allerdings gibt es einige Dinge, die mit diesem Ansatz nicht mehr funktionieren:

  • Die border-image folgt nicht der border-radius, sondern bleibt immer rechteckig.
  • Wenn Sie border-image-slice auf „Füllen“ festlegen, wird border-image nicht unter dem festgelegten background, sondern darüber gezeichnet. Das kann problematisch sein, wenn der Hintergrund halbtransparent sein soll.

Abschließend

Es gibt viele Möglichkeiten, Ränder in CSS zu animieren. Je nach Anwendungsfall können Sie sich für eine der beiden Optionen entscheiden.