CSS-Transitions Teil 2: Beispiele ohne JavaScript

Ein erstes "reines CSS"-Beispiel - eine nette Spielerei:

Dieses Anwendungsbeispiel verwendet unprefixed transitions. Funktioniert nicht in Internet Explorer 9 (oder älter) und nicht in Oprea mini. Vgl. https://caniuse.com/#search=transitions


Hier verwende ich übrigens eine unsichtbare Checkbox, die mit dem (als Button gestylte) Klick / Tap auf das Label de-/aktiviert wird. Die Pseudoklasse :checked dient dazu, um das Folgeelement ~ #carway .car zu animieren. Hier die Codes:

HTML

<div id="carwrapper">
  <input id="activatecar" type="checkbox">
  <label for="activatecar">Los / Zurück</label>
  <div id="carway">
    <img class="car" src="car.png">
  </div>
</div>

CSS

#carwrapper {overflow-y: hidden;}

#carwrapper label { /* Button Style */ }
#carwrapper label:hover { /* Button-Hover Style */ cursor:pointer;}

/* Checkbox unsichtbar machen */
#activatecar {display:none;}

/* Straße */
#carway {
  margin-top: 50px;
  width: 100%;
  height: 20px;
  background: lightgrey;
  border-top: 5px dashed #fff;
}
#carway::before {
  content: "";
  height: 20px;
  width: 100%;
  background: lightgrey;
  display: block;
  top: -25px;
  position: relative;
}

/* Auto Startposition */
.car {left:-50px, transition:all 0.5s ease;}

/* Auto Endposition */
#activatecar:checked ~ #carway .car {
  left: 70%;
}

... und hier der Download als Gesamtkunstwerk: Autofahren - die Datei 'car.png' ist in der HTML-Datei hart verlinkt, für den lokalen Offline-Einsatz aber notwendig. Daher hier herunterladbar. Dann bitte den Pfad von <img class="car" ... > anpassen.


Vielleicht sinnvolleres Beispiel: Ein animierte Sucheingabefeld. Dafür wird der Pseudoklasse :focus (welche ja vergeben wird, sobald der Cursor - bei Touch Devices: Finger - im Suchfeld landet) eine andere Definition (hier: Breite und Rahmenfarbe) mitgegeben als dem "unfocused" Suchfeld und diesem außerdem eine CSS-Transition mitgegeben.

Außerdem werden auch hier (via Adjacent / General Sibling Combinator: + bzw. ~) Folge-Elemente manipuliert: Dem ersten Folgeelement .search-field:focus + .search-submit - also dem "Suchen-Button" - und einem weiteren Folgeelement  .search-field:focus ~ .searchtipps - also den Suchtipps - werden ebenfalls für den Fall der "Suchfeld-Fokussierung" über CSS-Transitions animierte Style-Definitionen mitgegeben.

Das Beispiel der verzögerten Einbeldung der Suchtipps zeigt die Macht der CSS-Eigenschaft transition-delay:

Beispiel / Download: Animated Searchbox


Im zweiten Beispiel geht es um übereinander positionierte und via Pseudoklasse :hover auszublendende Elemente. Das erste Anwendungsszenario des "Bilderrätsels" ist übrigens von Stephan Hellers lesenswertem Artikel auf webkrauts.de inspiriert. Der zweite Beispielteil ("Cheat-Hover") ist ein via :hover entfernter CSS-Weichzeinungsfilter. Mehr zu CSS-Filtern im Beitrag CSS Filter.

Ohne JavaScript ist dieses Beispiel nicht "Touchscreen-tauglich", da es die :hover-Klasse natürlich nicht gibt. Für einen JavaScript-Workaround zur Vergabe einer "Ersatzklasse" finden Sie evtl. eine Anregung im Beitrag :hover-Effekte für Touch-Devices.

Beispiel / Download ("Desktop only"): Overlay- und Filter-Beispiele


Drittes Beispiel: Eingabe-Formular mit HTML5-basierter animierter Formularvalidierung. Die mit HTML5 eingeführten Pseudoklassen :valid und :invalid kann man sich nämlich ebenfalls für CSS-Transitions zunutze machen.

Dabei wird der Feldinhalt automatisch oder nach angegebenen pattern (mit Regulären Ausdrücken) tlw. in Abhängigkeit von der type-Angabe des jeweiligen input-Elements überprüft - ganz ohne JavaScript:

Beispiel / Download: Formularvalidierung


Und als letztes JavaScript-freies Beispiel noch ein paar Spielereien mit dem Button-Design.

Da hier :hover und :active genutzt werden, ist diese javascript-freie Umsetzung ebenfalls nicht Touchscreen-tauglich. 🙁

Dabei mache ich mir vor allem die CSS-Eigenschaften text-shadow und box-shadow zunutze, um einen räumlichen Effekt zu erzielen. Wer's mag:

Beispiel / Download ("Desktop only"): Button-Design


Zum ersten Teil der Serie gehts hier: CSS-Transitions Teil 1: Überblick
... und zum nächsten hier: CSS-Transitions Teil 3: Anwendungen MIT JavaScript

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Folgende HTML-Tags sind möglich:
<a href=""> <code> <em> <strong> <pre>

Zustimmung zur Datenverarbeitung