Anzeige
Tutorialbeschreibung

CSS3-Animations - Fortgeschrittene Techniken (2/2)

CSS3-Animations - Fortgeschrittene Techniken (2/2)

Fortgeschrittene Animationstechniken mit CSS3. In diesem Teil zeige ich euch, wie man Animationen in einer Endlosschleife laufen lassen, die Abspielgeschwindigkeit an unterschiedlichen Stellen beeinflussen oder die Animation per Klick starten lassen kann. Zweiter von zwei Teilen.


Zuvor drei kleine Hinweise:

• Die Animationen mit CSS werden zum Zeitpunkt der Erstellung des Tutorials nur von Firefox, Webkit-Browsern und Opera unterstützt. Alles zu den Animationen inklusive der Browserunterstützung findet ihr hier: W3schools.

• Für alle @keyframes-Regeln und alle animation-Notationen müsst ihr jeweils für die ensprechenden Browser noch ein vendor-Prefix hinzufügen. Das habe ich hier aus Übersichtlichkeitsgründen weggelassen. Aussehen würde das so:

@keyframes{...}
@-webkit-keyframes{...}
@-moz-keyframes{...}
@-o-keyframes{...}

und

div{
    animation: ...;
    -webkit-animation: ...;
    -moz-animation: ...;
    -o-animation: ...;
}

Für alle animation-Notationen benutzen wir die in Part 1 gelernte Kurzschreibweise.


 

Grundanimation

Für alle in diesem Tutorial gezeigten Beispiele werden wir als Ausgangsbasis folgende Animation verwenden:

Wir haben ein div, bei welchem die Breite und die Hintergrundfarbe verändert wird.
<div></div>

Die @-keyframes Regel für dieses div sieht folgendermaßen aus:
@keyframes standardanimation{
    0%{
         width: 100px;
         background-color: red;
    }
    25%{
         width: 200px;
         background-color: green;
    }
    50%{
        width: 150px;
        background-color: blue;
    }
    75%{
         width: 250px;
         background-color: yellow;
    }
    100%{
         width: 100px;
         background-color: red;
    }
}



Die Animation wird zusammen mit ein paar Grundangaben in der CSS für das div notiert.
div{
width: 100px;
height: 100px;
background-color: red;
animation: standardanimation 5s;
}


 

Endlosschleife und begrenzte Anzahl der Durchläufe

Standardmäßig läuft eine Animation einmal komplett durch. Mit animation-iteration-count lässt sich festlegen, wie oft die Animation hintereinander abgespielt werden oder ob sie in einer Endlosschleife laufen soll.

Wenn die Animation in einer Endlosschleife laufen soll, tragen wir als Wert infinite ein. Für eine begrenzte Anzahl an Durchläufen wird eine ganze Zahl eingetragen, z.B.: 6.

div{
    animation: standardanimation 5s infinite;
}


oder
div{
    animation standardanimation 5s 6;
}


Wenn die Animation in umgekehrter Abfolge wiederholt werden soll (quasi gespiegelt) trägt man für die Eigenschaft animation-direction den Wert alternate ein.
div{
    animation: standardanimation 5s infinite alternate;
}


 

Timing-functions für Animationen

Für den Geschwindigkeitsverlauf der Animation gibt es einige feste Werte. Diese könnt ihr am besten hier bei W3schools ausprobieren. Da hilft Probieren mehr als Studieren ;-)

Außerdem lassen sich selbst definierte timing-functions festlegen. Dafür kann ich dieses super Tool von Lea Verou empfehlen: cubic-bezier.


Animationen anhalten und wieder starten

Man kann Animationen auch unterbrechen. Das erkläre ich jetzt an einem kleinen Praxisbeispiel.

Wir nehmen als zu animierendes Element ein einfaches Text-input-Feld.
<input type="text">

Als Animation weiterhin unsere standardanimation. Das sieht vielleicht nicht so toll aus, zeigt aber gut die Funktion von animation-play-state.
input{
    animation: standardanimation 5s infinite alternate;
}


Nun stellen wir ein, dass die Animation bei fokussierung des input-Feldes (klick rein) anhalten soll. Das machen wir mit der CSS pseudo-Klasse :focus
input:focus{
    animation-play-state: paused;
}



Übersicht

Ich habe für euch bei dabblet.com die behandelten Beispiele als live-Version eingestellt. Dort könnt ihr euch das Behandelte anschauen und selber noch ein bisschen rumexperimentieren: http://dabblet.com/gist/3813220.


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von wudwae
  • 14.09.2014 - 17:01

Danke mal von mir!!!

Portrait von Kundentest
  • 08.08.2014 - 19:07

Herzlichen Dank für das Tutorial.

Portrait von rafoldi
  • 04.01.2013 - 20:09

Cool, mal sehen, denke ich werde das etwas abgewandelt einbauen.

Portrait von kiteflier68
  • 04.01.2013 - 19:44

Danke, schönes Tutorial.

Portrait von antiyou
  • 04.01.2013 - 18:37

Funktioniert im Internet Explorer garnicht. Schade. Demnach nicht zu gebrauchen.

Portrait von johanna52
  • 04.01.2013 - 18:21

danke für das sehr interessante und sehr gute Tutorial

Portrait von Terence1979
  • 04.01.2013 - 17:45

danke schön super tutorial!

Portrait von klarakolumna
  • 04.01.2013 - 17:36

Herzlichen Dank für diese Tutorial zu Thema CSS3 !!!
Zuvor sollte man den ersten Teil gelesen haben.
Link:http://www.psd-tutorials.de/tutorials/web/html-css/-/view/596--css-tutorial-teil-1

Portrait von MaoMao
  • 04.01.2013 - 16:51

Danke für das Tutorial, habe mir auch gleich Teil 1 geholt.

Portrait von MicroSmurf
x
×
×