CSS Übungsaufgaben [Animation & Verlauf]

Ich habe ein paar CSS Fingerübungen geschrieben, hier kannst du diese nachmachen und dein CSS Wissen erweitern bzw. abfragen.

Animiertes Burger Menü

Aufgabe: Es soll ein animiertes Burger Menü-Icon erstellt werden. In diesem Beispiel bei einem hover Event ausgelöst werden.
Hamburger Menü Animation Lösung

Wiederholung Menu Animation

Aufgabe: Ein Burger Menu, soll zu einem Pfeil transformieren.
CSS Burger Arrow Menu Lösung

Animiertes Input-Text-Feld mit Validation

E-Mail

Aufgabe: Es soll ein Inputfeld erstellt werden, wenn man drauf klickt, soll das Label nach oben sliden und die Farbe bei der Validierung ändern.
Textinput Animation Lösung

Text mit Verlauf

The quick brown fox jumps over the lazy dog

Aufgabe: Es soll ein Text mit einem Verlauf gefüllt werden.
CSS Verlauf im Text Lösung

Warnsignal Animation

Aufgabe: Animiere ein Farb- Transparent- Verlauf so, dass es wie ein Alarm aussieht.
CSS animieter Alarm Lösung

Kombination aus den letzten beiden Übungen

The quick brown fox jumps over the lazy dog

Aufgabe: Animiere einen Text so, dass es so aussieht, als ob ein Scan durchgeführt wird.
CSS Scan-Text Animation Lösung

SVG Animation

Dem zu animierenden Objekt im SVG eine ID geben und diese mit CSS animieren.

<path id="cat_head" d="M244.4,0l-21.2,12.2l-10.9,6.3c-3.8-1.2-7.8-1.9-12-1.9c-5.3,0-10.3,1-14.8,2.9l-8.3-4.8L156,2.5l3.9,24.1l3.9,23.8
           c0.1,18.5,16.4,33.4,36.5,33.4c20.2,0,36.5-15.1,36.5-33.6c0-1-0.1-1.9-0.1-2.9l3.8-23.2L244.4,0z M183,48c-5.3,0-9.5-3.2-9.5-7.1
           c0-3.9,4.3-7.1,9.5-7.1s9.5,3.2,9.5,7.1C192.5,44.8,188.3,48,183,48z M216,46.9c-5.3,0-9.5-3.2-9.5-7.1s4.3-7.1,9.5-7.1
           s9.5,3.2,9.5,7.1S221.3,46.9,216,46.9z"/>

#cat_head{
  animation: headbang 2s ease infinite alternate;
}
@keyframes headbang {
  0% {
    transform: rotate(5deg);
    transform-origin: 90% 30%;
  }
  100% {
    transform: rotate(-5deg);
    transform-origin: 70% 30%;
  }
}

CSS Tutorial

Voriger Schritt: CSS: Checkbox styling

Zur Turtorial-Reihe: CSS Tutorial

Nächster Schritt: responsive Navigation mit Burgermenü