CSS Animation starten ohne Javascript

CSS Events – Animationen 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

Der Filter-Effekt für das Bild beruht auf input type="checkbox" und erzeugt einen einfachen Klick-Effekt, wo ansonsten ein Hover gewirkt hätte. Damit der Benutzer erkennt, dass das Bild klickbar ist, bekommt ldas

HTML für CSS-Event ohne Hover oder Javascript
<input type="checkbox" id="rosa">
<label for="rosa">
    <img class="rosafilter" src="rosa.jpg" width="1222" height="493" alt="CSS-Filter-Effekt ohne hover oder Javascript">
</label>
CSS transition ohne Hover oder Javascript
input#rosa { 
	display: none
}
label[for="rosa"] {
	cursor:pointer
}
.rosafilter { 
	filter: invert(100%); 
	transition: filter 1s
}
input[type="checkbox"]:checked+label .rosafilter { 
	filter: invert(1%);
	transition: filter 1s
}

Am Rande: Animationen mit transition springen ohne weichen Übergang zurück auf den anfänglichen Zustand. Unglücklicherweise gibt es in der aktuellen CSS-Spezifikation keine Möglichkeit, auch das Zurückkehren in den initialen Zustand mit einem weichen Übergang durchzuführen – das ginge wieder nur mit Javascript.

Beim CSS Filter-Effekt funktioniert der weiche Übergang durch den Wert für die Stärke des Effekts: von 100% zu 1%.

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