CSS3 Animation mit @keyframes – meine erste Animation mit CSS3

CSS3 Animationen sind noch nicht allzu verbreitet, trotzdem lohnt ein Blick dahin, anders gesagt, meine erste CSS3-Animation mit @keyframes ist fällig! (den Schritten des Beispiels auf W3Scools.com folgend.)

Eine CSS3 Animation ist eine zeitliche Abfolge von CSS-Eigenschaftsänderungen.

Zuerst erstelle ich mit der keyframes-Regel (@keyframes) die Animation. Ich weise (mindestens) dem Start- und Endpunkt der Animation Eigenschaften zu. Während der Animation wechselt dann der Zustand, der Wert der Eigenschaft, vom ersten zum nächsten, bis zum letzten Wert. Die Animation braucht einen Namen. Dieser Name ist ein Selektor -> ??? merken!

@keyframes animationsname
{
from {background: url(http://www.css3.de/css3-LoGO.png) top left;}
to: {background: url(http://www.css3.de/css3-LoGO.png) top right;}
}

Statt „from“ und „to“ kann die Angabe auch in Prozent erfolgen (Animation von 0% bis 100%).

Diese Animation muss ich mit der Angabe des Animationsnamens und der Dauer der Animation einem Element zuweisen.

Element {
animation: animationsname 10s;
}
Mindestangabe ist hier der Name und die Dauer der Animation.

In meinem Fall sollte also die Grafik für 10 Sekunden von links nach rechts laufen und dann wieder zurück. Hey, ich habe eine CSS3-Animation erstellt, meine erste kleine Animation mit CSS3 @keyframes ist fertig!

Hier die CSS-Angaben:

Viel Spass bei Ausprobieren!

Kommentar (1)

  1. Pingback: animation mit @kreyframes und mehreren Hintergrundbildern | CSS3.de

Kommentare sind geschlossen.