CSS, HTML und Javascript mit {stil}

CSS transitions

Beispiele für einfache CSS-Transisitions

Transition ist die Vorstufe zu Animationen – Keyframe-Animationen sind eine Folge von Transitions. Die einfachen »Cross-Fade«-Animationen kommen nie aus der Mode: Wir kennen Sie aus der Fotografie, aus Film und Video.

Transitions erwachen genauso wie komplexe Animationen durch Events – Ereignisse. Das erste und einfachste Ereignis ist das Laden der Seite. Ohne besondere Einstellungen starten CSS Transitions und Animationen beim Laden der Seite.

Für die Interaktion mit dem Benutzer braucht CSS Transition genauso wie CSS-Keyframe-Animationen zwei Faktoren: ein Element und ein Event, das den Übergang auslöst. Das klassische auslösende Ereignis ist das Hovern mit der Maus oder die Berührung des Fingers auf dem Touchscreen (für das Touch-Event hat CSS nur wenige stabile und breit unterstützte Lösungen).

C S S
<div class="wrap">
   <span class="p1">C</span>
   <span class="p2">S</span>
   <span class="p3">S</span>
</div> 

Das Element, auf dem das hover-Event auslöst, ist <div class="wrap">, aber die Transition findet auf den Pseudo-Elementen .p1:before, .p2:before und .p3:before statt.

.wrap:hover .p1:before, 
.wrap:hover .p2:before, 
.wrap:hover .p3:before {
	width: 100%;
}

.p1, .p2, .p3 {
   -webkit-text-fill-color: #fff;
   text-fill-color: #fff;
   letter-spacing: 0.1em;
   position: relative;
}

.p1:before, .p2:before, .p3:before {
   position: absolute;
   width: 0%;
   overflow: hidden;
   filter: drop-shadow(5px 5px 5px hsla(0,0%,0%, 0.3));
}
.p1:before {
   content: "C";
   -webkit-text-fill-color: salmon;
   text-fill-color: salmon;
   -webkit-text-stroke-width: 2px;
   text-stroke-width: 2px;
   -webkit-text-stroke-color: salmon;
   text-stroke-color: salmon;
   transition: 1s;
}
.p2:before {} und .p3:before {} äquivalent zu p1

:hover ist der Haken der Animationen und Transitionen, denn Touchscreens kennen kein hovern mit der Maus. Das Bewegen des Fingers auf dem Screen scrollt die Seite.

Bilder mit transition weich überblenden

CSS transition kann Bilder weich überblenden. Die Bilder liegen absolut positioniert in einem relativ positionierten Block. Beim hovern wird das obere Bild durch opacity durchsichtig und ausgeblendet. Mit 1s für den Übergang entsteht das weiche Einblenden des unten liegenden Bildes.

<div id="blend" style="width:600px; height:250px;">
<img src="image-1.jpg"  />
<img id="top" src="image-2.jpg"  />
</div>
CSS Transition Slide2 CSS Transition Slide1

CSS für das weiche Überblenden

#blend { position: relative }

#blend img#top:hover { opacity:0 }

#blend img { position: absolute; 
    top: 0; left: 0; opacity: 1;    
    transition: opacity 1s
}

CSS transform verändert die Position, Lage, Größe und Form eines Elements und liefert zusammen mit transition einfache Animationen, die an Flash anknüpfen.

CSS transition ist auch Ende 2017 noch ein Working Draft CSS Transitions W3C Working Draft 19 November 2013 und kann bis zur endgültigen Version geändert werden.

Text mit CSS transition weich über ein Bild legen

CSS transition kann Text beim Hovern weich über einem Bild einblenden. Der Text ist anfangs durch opacity: 0 ausgeblendet und soll mit transition:opacity 1s beim Hovern über das Bild eingeblendet werden.

Der auslösende Faktor ist :hover. Damit das Hovern über das Bild seine Wirkung auf den Text erstreckt, brauchen wir einen Kontext-Selektor: E + F. F ist das HTML-Element, das direkt auf das img-Tag folgt (das div-Element mit dem Text).

<div id="blend">
<img src="image-1.jpg"  />
<div id="lep">Der Veloziraptor</div>
</div>
CSS Transition Slide2
Der Veloziraptor

CSS für das weiche Überblenden

#blend{
   position:relative;
}

#blend ist relativ positioniert, damit es immer so groß wie das Bild. Das Bild ist nicht positioniert, denn sonst würde es seine Größe nicht autziehen.

#blend img {
   width: 100%; 
   height: auto;
   padding: 10px; 
   box-sizing: border-box;
}

#lep – das Element, in dem der Text liegt, ist absolut am unteren Rand von #blend positioniert: position: absolute; bottom: 0;

#lep {
   position:absolute; 
   bottom: 0px;
   background: hsla(0,0%,0%,0.5);
   opacity:0; 
   transition: opacity 1s; 
   width: 100%; 
   text-align:center;
}

#blend img:hover + #lep { 
   opacity: 1
}

Der Trick ist der Kontext-Selektor #blend img:hover + #lep – das Element, das beim Hovern mit der Maus auf das Bild folgt.

Der kleine Effekt hat einen Haken: Auf Touch-Devices gibt es kein hovern mit der Maus und der Effekt muss noch mit Javascript nachgeführt werden.

<script>
var blendimg = document.querySelector("#blend img");
blendimg.ontouchstart = function (eve) {
	eve.preventDefault();
	document.querySelector ("#led").classList.toggle("touchenter");
}
</script>	

Bild über Text einblenden

Das Hovern mit der Maus war schon in CSS 2.1 der Auslöser für die ersten Effekte. Wird das Element, auf dem das Hovern ausgelöst wird, durch eine Einblendung verdeckt, endet das Hovern abrupt, so dass der Effekt gar nicht erst zur Geltung kommt.

Der Auslöser ist darum nicht aus Hovern über dem Text, sondern das anfangs durchsichtige Bild muss das :hover-Ereignis tragen, damit es über dem Text sichtbar wird.

Lohengrin
lohengrin
<div id="lohenbox">
   <div id="lohentext">Lohengrin</div>
   <img id="lohengrin" src="lohengrin.png" width="400" height="400" alt="lohengrin">
</div>
#lohenbox { 
   position:relative; 
   width: 300px; height: 300px;
}

Der Text bekommt einen Hintergrund, damit die Maus einen großen Landeplatz findet. Hier zentriert top: -9999px; bottom: -9999px; margin: auto; den Text in die vertikale Mitte des umfassenden Blocks (wie bei Bilder horizontal und vertikal zentrieren).

#lohentext { 
   width: 100%; 
   height: 80px;
   position: absolute;
   top: -9999px;
   bottom: -9999px;
   margin: auto;
   background: white; 
}

Das Bild liegt im HTML nach dem Text, und weil es absolut positioniert ist, im Viewport durchsichtig (opacity: 0) des Browsers über dem Text.

#lohengrin { 
   width: 100%; height: auto; 
   position: absolute; 
   opacity: 0; 
   transition: opacity 1s; 
}

#lohengrin:hover {
   opacity: 1; 
   transition: opacity 1s;
}

Touchscreens brauchen wieder den Schuss Javascript, denn ein Touch auf dem Touchscreen erzeugt ein anderes Verhalten als das Hovern mit der Maus:

  • Ein Touch auf einen Link wird wie ein Mausklick auf dem Monitor behandelt,
  • eine längere Berührung bedeutet auf dem Touchscreen: Markiere diesen Text zum Kopieren.
  • Die Bewegung des Fingers auf den Touchscreen ist kein Hovern, sondern scrollt die Seite.

Eine 1:1-Übersetzung vom Hovern in Touch-Events gibt es nicht.

<script>
var lohengrin = document.querySelector("#lohengrin");
lohengrin.ontouchstart = function (eve) {
	eve.preventDefault();
	this.classList.add("fragnicht");
}
</script>

Das Script braucht also noch eine weitere CSS-Klasse:

.fragnicht { opacity: 1; }

Das Bild verschwindet nicht, wenn der Finger hochgenommen wird: Ein Touch ist immer nur eine kurze Berührung, ähnlich wie der Klick mit der Maus. In dieser kurzen Zeitspanne würde der Benutzer das eingeblendete Bild gar nicht zu Gesicht bekommen. Das Bild bleibt stehen bis der Benutzer den Touchscreen außerhalb des Bildes berührt.

Beispiele für einfache CSS-Transisitions CSS transition