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

Los / Zurück

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:

<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>

#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%;
}

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:

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.

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:

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: