Logo für CSS-Beiträge

Animation mit CSS3

Animation von Graphiken mit CSS3-Mitteln

Eine bestehende Schrift-Animation, die mit JavaScript realisiert war, soll auf eine bewegte Animation mit CSS3-Techniken umgestzt werden. Die technischen Möglichkeiten mit HTML und CSS3 sind in diversen Dokumentationen ausführlich beschrieben, jedoch sind einige Randbedingungen in der Umsetzung zu beachten, die hier ausführlich beschrieben werden: 

Der Hintergrund ist eine statische Graphik und der zu bewegende Teil wird mit einem überlagerten HTML-Element realisiert. Wie sich die entsprechenden HTML-Elemente überlagern lassen, hängt von der Reihenfolge der Definitionen ab.

<div id=“fenster“>
   <div class=“position hintergrund“></div>
   <div class=“position schrift move“></div>
</div>

Das DIV-Element mit der ID: fenster beschreibt den sichtbaren Bereich, in dem die Animation stattfindet. Das unterste DIV-Element hintergrund definiert das statische Bild auf der hintersten Ebene, wogegen das DIV-Element schrift an 2. Position den Hintergrund überlagert. Da das Bild im Element schrift als .PNG mit transparentem Hintergrund abgespeichert ist, sind die nichtverdeckten Teilbereiche von hintergrund sichtbar. Alle dem fenster untergeordneten DIV-Elemente werden mit der Klasse position releativ zum Element fenster an die linke obere Ecke positioniert, um die Überlagerung herzustellen.Die entsprechende CSS-Definition schaut wie folgt aus:

#fenster {
   position:relative;
   height:96px;
   width:315px;
   overflow:hidden;
}
.position {

   position:absolute;
   top:0px;
   left:0px;
}
.hintergrund {

   background-image:url(Hintergrundbild.jpg);
   height:100%;
   width:100%;
}
.schrift {

   background-image:url(Lauftext.png);
   height:100%;
   width:800px;
}

Um einen Endlosdurchlauf optisch zu simulieren, wird das Bild Lauftext.png, das ursprünglich eine Breite von 400px hatte, in einem Graphikprogramm kopiert und als Duplikat rechts an das Original angehängt, so dass sich eine Bildbreite von 800px ergibt.
Aufbau der Lauftextgraphik
Wenn nun im Rahmen der Animation Lauftext.png nach links 400 Pixel verschoben wird, rückt auf der rechten Seite visuell der Bereich des Bildduplikates nach. Der nachrückende Teil ist inhaltlich der gleiche, wie der, der auf der linken Seite verschwunden ist. Nach der Verschiebung von 400px nach links ist eigentlich der Originalinhalt wie zum Startzeitpunkt der Animation wieder sichtbar, allerdings nur das Duplikat, das rechts angeklebt wurde. Nun kan man die Animation wieder von vorne beginnen lassen und erreicht damit optisch einen Endlosdurchlauf der Textanimation. Mit der Klasse move bringt man nun Bewegung in das Geschehen, dessen Durchlauf 20s bei gleichbleibender Geschwinigkeit dauert und endlos durchläuft:

.move {
   animation-name: run;
   animation-duration: 20s;
   animation-timing-function: linear;
   animation-delay: 0s;
   animation-iteration-count: infinite;
   animation-direction: normal;
   animation-play-state: running;
   -webkit-animation-name: run;
   -webkit-animation-duration: 20s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-delay: 0s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: normal;
   -webkit-animation-play-state: running;
}

Der Animations-Name run ist wie folgt durch das CSS3 @keframes definiert, um die Bewegungsrichtung zu bestimmen:

@keyframes run
   {
   0% {left:0px;}
   100% {left:-400px;}
   }
@-webkit-keyframes run /* for Safari und Chrome */
   {
   0% {left:0px;}
   100% {left:-400px;}
   }

Sollten Sie daran interessiert sein, dass wir für Sie eine Animation zum Einbinden in Ihr Umfeld erstellen, dann senden Sie uns doch ein kurzes E-Mail unter der Angabe Ihrer Randbedingungen und wir werden uns dann mit Ihnen in Verbindung setzen, um die Einzelheiten zu erörtern. Kontaktformular.

Schreibe einen Kommentar