CSS Animation starten

Die Dreiteilung der Techniken hinter Webseiten sagt: HTML für die Struktur, CSS für die Präsentation, Javascript fürs Verhalten.

So sind CSS-Transitions und Animationen maßgeblich auf Javascript angewiesen, denn Javascript erkennt Events wie einen Mausklick und findet heraus, ob ein Element bei Scrollen der Seite gerade sichtbar wird.

Dennoch kennt auch CSS Events und Verhalten: Wenn die Maus über ein Element hovert, ein Element in den Fokus kommt, wenn ein Checkbutton oder Radiobutton geklickt wird.

::hover Pseudo-Element

Die ehrwürdige :hover Pseudo-Element war seit CSS 2.1 die Grundlage für CSS-Animationen und -Effekte: Das Hovern mit der Maus über einem Element löst eine Aktion aus. Ein einfacher hover-Effekt mit einem Wechsel der Schriftfarbe oder Hintergrundfarbe signalisiert dem Benutzer, dass es hier etwas zu Sehen gibt.

Mit dem Auftritt der Touchscreens ist Hover als Auslöser von Transformationen und Animationen zum Fallstrick geworden. Auf dem Touchscreen ist das Antippen mit dem Finger eine Einbahnstraße: Die kurze Berührung mit dem Finger löst die Animation (vielleicht!) zwar aus, aber das Heben des Fingers rollt den Effekt nicht zurück, sondern der Effekt friert ein.

Auf dem Desktop-Monitor wiederum wirkt der hover-Effekt nur so lange, wie die Maus noch über dem Element liegt – hover-Effekte sind temporär.

Es gibt keine einfachen zuverlässige Techniken, die feststellen, ob die Seite gerade auf einem Touchscreen liegt oder ob sie auf eine Maus oder ein Touchpad setzen kann.

Eine Klasse no-touch versucht, Benutzern mit Touchscreens den Hover-bleibt-stehen-Effekt zu ersparen. Eine sichere Methode, die feststellt, ob es sich um einen Touchscreen handelt, gibt es zwar nicht, aber immerhin erspart eine no-touch-Klasse vielen Benutzern irreführende Effekte aufgrund eines :hover.

NO-TOUCH

no-touch reagiert nur auf das Hovern mit der Maus, nicht aber auf eine Berührung des Fingers auf dem Touchscreen.

Also doch wieder Javascript …

CSS
.no-touch .tapme:hover {
}
Javascript no-touch
<script>
var touchsupport = false;
if ("touchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0) {
	touchsupport = true;
}
if (!touchsupport) {
	document.body.classList.add("no-touch");
}
</script> 

:hover durch touchstart, mouseenter, mouseleave ersetzen

<script>
function toggleImage(e) {
   if (e.type == "touchstart") {
      swap.removeEventListener("mouseenter", toggleImage);
      swap.removeEventListener("mouseleave", toggleImage);
   }

   swap.classList.toggle("hover");
}

var swap = document.querySelector(".swap");

["mouseenter", "mouseleave", "touchstart"].forEach(function (event) {
   swap.addEventListener(event, toggleImage, false);
});
</script>

input type checkbox für Klick-Aktionen

Pseudo-Element ::checked

Radio-Buttons und Checkboxen wirken wie Kippschalter und melden das Einschalten über das Pseudo-Element ::checked. Diese Ereignisse sind für Eingabefelder eines Formulars definiert.

Die Kombination aus input type checkbox oder type radio macht den Weg frei für größere, gestylte und benutzerfreundlichere Buttons.

Da CSS die Änderungen des Zustands erkennt, bilden input type checkbox und type radio eine Basis für CSS-Events, die eine Animation starten und kontrolliert zurücksetzen.

Die HTML-Struktur braucht für CSS-Animationen ohne Javascript zusätzliche HTML-Elemente – input type checkbox oder input type radio. Das ist das Manko CSS-Events.

HTML für die Flipboxen
<div class="flipping-cards">
   <div>
      <input type="radio" name="designer" id="item1">
      <label for="item1">
         <span class="wrapper">
            <span class="front"></span>
            <span class="back"></span>
         </span>
      </label> 
   </div>
         …
</div>

Das label-Element fängt Klicks ab, auch wenn das Eingabefeld selber durch display:none verborgen ist. Wichtig ist, dass das input-Feld und das label-Tag durch id und for-Attribute verbunden werden!

Innerhalb von label liegen die span-Elemente front und back, die das Hintergrundbild bzw. das Vordergrundbild einspielen.

CSS für die Flipboxen
.flipping-cards label{ 
   display:block; 
   width:200px; height:250px; cursor:pointer;
}

.flipping-cards input[type="radio"] { display:none; }

.flipping-cards .wrapper{
   display:block; width:200px; height:250px;  
   transform-style: preserve-3d; // bringt has Vordergrundbild zum Vorschein
   transition: all .50s;  
   position:relative; 
}

.flipping-cards .wrapper span{
   display:block;
   width:200px;
   height:250px;
   position:absolute;
   top:0; left:0;
}

Der Flip-Effekt braucht für jede Karte zwei Bilder, die anfangs sichtbare Rückansicht (.back) und die beim Klick eingespielte Vorderansicht (.front).

Hintergrund – Vordergrundbilder
.flipping-cards div:nth-child(1) .back {
	background-image:url(scene-1-back.jpg);
}

.flipping-cards div:nth-child(2) .back {
	background-image:url(scene-2-back.jpg);
}

.flipping-cards div:nth-child(3) .back {
	background-image:url(scene-3-back.jpg);
}

.flipping-cards label[for="item1"] .front { 
	background-image:url(scene-1-front.jpg);
}
.flipping-cards label[for="item2"] .front { 
	background-image:url(scene-2-front.jpg);
}
.flipping-cards label[for="item3"] .front { 
	background-image:url(scene-3-front.jpg);
}
Hintergrund – Vordergrundbilder
.flipping-cards label .front{
	transform: rotateY(180deg);
	backface-visibility:hidden; 
}

.flipping-cards input[type="radio"]:checked + label .wrapper{
      transform: rotateY(-180deg);
}

input type="checkbox" und input type="radio" als CSS-Event wirken auch in Internet Explorer zuverlässig. Der Flip-Effekt hingegen nicht: IE 10 und IE 11

Ein weiteres Beispiel für den Einsatz von :checked für Animationen mit reinem CSS ist das Akkordeon ohne Javascript.

hover click