CSS Events – Animationen starten
Die Dreiteilung der Techniken hinter Webseiten besagt: Für die Struktur gibt es HTML, CSS für die Präsentation, Javascript fürs Verhalten – also für Aktionen. Aber CSS erkennt ebenfalls Benutzeraktionen, die eine Animationen starten.
Pseudo-Klasse :checked
Radio-Buttons und Checkboxen wirken wie Kippschalter und melden das Einschalten über das Pseudo-Klasse :checked. Diese Ereignisse sind für Eingabefelder eines Formulars definiert.
input type checkbox oder type radio machten den Weg für größere, gestylte und benutzerfreundlichere Buttons frei.
.sweetcheck input {
display: none;
}
.sweetcheck label span {
background-image: url("checkbox-off.svg");
cursor: pointer;
}
.sweetcheck input[type=checkbox]:checked + label span {
background-image: url("checkbox-on.svg");
}
Radio-Button :checked
Da CSS die Änderungen des Zustands erkennt, bilden input type checkbox und type radio eine Basis für CSS-Events, um eine Animation zu starten und kontrolliert zurück zu setzen.
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.
<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.
.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).
.flipping-cards div:nth-child(1) .back { background-image:url(scene-back.jpg); } .flipping-cards label[for="item1"] .front { background-image:url(scene-front.jpg); }
.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 wirkten schon in Internet Explorer zuverlässig, der Flip-Effekt bleibt den immergrünen Browsern vorbehalten.
Ein weiteres Beispiel für den Einsatz von :checked für Animationen mit reinem CSS ist das Akkordeon ohne Javascript.
Animation mit Mausklick / Touch starten
Eine Animation erneut starten mit einem Button und :active:
<button id="replay">Nochmal</button> <div class="down"> <img src="svg/bluecar.svg" width="150" height="90" alt="Spielzeugauto"> </div>
.down {
height:100px;
width: 100%;
animation: moveRight 3s forwards ease-in-out;
}
@keyframes moveRight {
0% {transform: translate(0, 0)}
100% {transform: translate(calc(100% - 100px), 0) }
}
#replay:active + .down {
animation-name: none;
}
Der Klick auf den Button entfernt die Animation mit animation-name: none und die Animation startet erneut.
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, reicht ein cursor:pointer nicht. Darum gibt es hier noch ein Chevron (Dreieck-Icon).
<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>
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%.
:hover Pseudo-Element
Die ehrwürdige :hover Pseudo-Klasse 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 reagiert nur auf das Hovern mit der Maus, nicht aber auf eine Berührung des Fingers auf dem Touchscreen. Das muss aber schon wieder auf Javascript abgewälzt werden.
Also doch wieder Javascript …
.no-touch .tapme:hover {
}
<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>
