Layout SVG

CSS: Checkbox-Animationen

Zuletzt bearbeitet am: 13.10.2021

Auf so gut wie jeder Website ist eine Checkbox zu finden. Sie kommen unter anderem in Kontaktformularen, Cookie-Bannern oder bei Onlinetests zum Einsatz. In diesem Beitrag stelle ich verschiedene CSS-Animationen für Checkboxen vor.

Image by macrovector_official (https://www.freepik.com/free-vector/decorative-blue-square-contour-checkbox-green-color-tick-approval-confirmation-chek-mark-internet-symbol-pictogram-vector-illustration_4611153.htm)

Image by macrovector_official (https://www.freepik.com/free-vector/decorative-blue-square-contour-checkbox-green-color-tick-approval-confirmation-chek-mark-internet-symbol-pictogram-vector-illustration_4611153.htm)

Checkbox-Animation mit CSS-Entities

Um eine elegante Checkbox-Animation mit einem möglichst schlanken Code zu erstellen, ist unter anderem der Einsatz von Entities eine gute Option. Die Entities werden vom Browser selber dargestellt und man benötigt keine eingebundene Bilddatei oder Ähnliches. Das spart Performance und die Mühe extra eine Bilddatei zu erstellen und einzubinden.

Eine Liste von CSS-Entities findest Du unter anderem auf W3Schools.

Für die Checkbox Animation habe ich, wer hätte es gedacht, das Häkchen-Symbol (2713) verwendet. Das HTML für die Checkbox besteht nur aus dem Input-Element.

<input class="checkbox" type="checkbox" name="checkbox"/> 

Das Stylesheet besteht aus dem Styling für die Checkbox selbst und seinem Pseudoelement. In den Stylings des Pseudoelements ist das Häkchen content: "\2713"; definiert. Das Pseudoelement legt sich über die Checkbox. Besonders wichtig ist pointer-events: none;, denn ohne diese Eigenschaft wäre die Checkbox durch das Verdecken des Pseudoelements nicht anklickbar.

.checkbox {
  width: 1.5em;
  height: 1.5em;
  outline: none;
  appearance: none;
  border: solid 2px #333;
  border-radius: 3px;
  background: #fff;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.checkbox::after {
  content: "\2713";
  width: auto;
  height: auto;
  display: inline-block;
  opacity: 0;
  color: #333;
  font-size: 1rem;
  margin: 0 auto;
  pointer-events: none;
  transition: .5s opacity ease;
}

.checkbox:checked::after {
  opacity: 1;
}

Bei diesem Animations-Beispiel ändert sich das Häkchen-Symbol durch die Eigenschaft opacity von transparent zu nicht transparent.

Ergebnis

Beispiel mit font-size

Der Code für die Checkbox-Animation ist leicht anpassbar und je nach Bedarf kann man verschiedene Animationen erstellen. In diesem Beispiel entsteht sie durch das Verändern der Schriftgröße. Im Urzustand ist die Eigenschaft font-size auf 0 gesetzt, das Häkchen ist also nicht sichtbar. Wenn die Checkbox angeklickt wird, erhöht sich die Schriftgröße. Der Effekt wirkt, als ob das Häkchen wachsen würde.

.checkbox::after {
  content: "\2713";
  width: auto;
  height: auto;
  display: inline-block;
  color: #015353;
  font-size: 0rem;
  margin: 0 auto;
  pointer-events: none;
  transition: .5s all ease;
}

.checkbox:checked::after {
  font-size: 1.2rem;
}

Ergebnis

Checkbox-Animation mit Kreuzsymbol

Durch die große Auswahl der verschiedenen CSS-Entities, kann man die Checkbox individuell Gestalten. Für z.B. eine Onlineumfrage oder einem Onlinetest bei der man zu einer Frage mehrere Auswahlmöglichkeiten hat, ist statt dem Häkchen eher ein Kreuz passend. Das Pseudoelement beinhaltet in diesem Beispiel das Kreuzsymbol content: "\2715";.

.checkbox::after {
  content: "\2715";
  width: auto;
  height: auto;
  display: inline-block;
  color: #333;
  font-size: 0rem;
  margin: 0 auto;
  pointer-events: none;
  position: relative;
  top: -.5px;
  transition: .5s all ease;
}

.checkbox:checked::after {
  font-size: 1.1rem;
}

Ergebnis

Checkbox-Animation mit SVG

Eine andere Methode um das Checkbox-Häkchen darzustellen ist die Scalable Vector Graphic. Der Code für die folgende Checkbox-Animation ist etwas umfangreicher im Gegensatz zu den vorangegangenen Beispielen mit CSS-Entities. Dafür kann man das Häkchen mit einem Grafikprogramm selber nach seinen eigenen Vorstellungen gestalten und die Möglichkeiten die Animation individuell anzupassen sind sehr viel größer.

<div class="checkbox-container">
  <input class="checkbox" type="checkbox" name="checkbox">
  <svg class="checkbox-svg" viewBox="0 0 102.598 100.368" overflow="visible">
    <path d="M5,61.701l31.209,33.124c0.754,0.801,1.866,0.704,2.47-0.215L97.598,5"/>
   </svg>
</div>

Die SVG für das Häkchensymbol muss sich in Codeform innerhalb des Checkbox-Containers befinden. Die Animation lässt sich mit einer Einbindung des SVG in z.B. einem img-Tag nicht umsetzen. Möchte man den HTML Code schlank halten, empfiehlt es sich die SVG durch die Symbol-Methode einzubinden.

.checkbox-container {
  width: 1.5em;
  height: 1.5em;
  position: relative;
}

.checkbox-container .checkbox {
  width: inherit;
  height: inherit;
  outline: none;
  appearance: none;
  border: solid 2px #333;
  border-radius: 3px;
  background: #fff;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.checkbox-container .checkbox-svg {
  width: .9em;
  height: .9em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 1px;
  pointer-events: none;
}

.checkbox-container .checkbox-svg path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  stroke: #333;
  stroke-width: 15px;
  stroke-linecap: round;
  fill: none;
  transition: stroke-dashoffset .8s ease;
}

.checkbox-container .checkbox:checked + .checkbox-svg path {
  stroke-dashoffset: 0;
}

Da sich die SVG wieder über die Checkbox legen soll, brauchen wir bei diesem Beispiel einen umgebenden Container. Der Parent-Container .checkbox-container gibt die Breite und Höhe für die Checkbox vor und hat die Eigenschaft position: relative;. Dadurch kann die SVG .checkbox-svg mittels position: absolute; aus dem Fluss herausgenommen werden und überlagert somit das input.

Bei der eigentlichen Animation ist die Eigenschaft stroke-dashoffset entscheidend. Hiermit lässt sich der Strichversatz des SVGs in Verbindung mit der Eigenschaft stroke-dasharray animieren. Es sieht so aus, als ob das Häkchen gezeichnet wird.

Ergebnis

Hinweis

Alle Animationen aus diesem Beitrag lassen sich auch auf Radio-Buttons anwenden. Die Animationen funktionieren in allen gängigen modernen Browsern.

Hat dir der Beitrag gefallen?

Dann lass gerne einen Like da.

x
Vielen Dank für deine Bewertung
Layout SVG Bottom

Kommentar verfassen

Deine Email-Adresse wird nicht veröffentlicht.
Erforderliche Felder sind mit * gekennzeichnet

Layout SVG Bottom