Verschiedene Möglichkeiten zum Animieren eines Rahmens in CSS
Rahmen festlegen
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.
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.
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.
/* 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 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.
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:
@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.
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 derborder-radius
, sondern bleibt immer rechteckig. - Wenn Sie
border-image-slice
auf „Füllen“ festlegen, wirdborder-image
nicht unter dem festgelegtenbackground
, 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.