CSS Animation

Wir animieren mit CSS eine Graphik mit den Abmessungen 2000 Pixel in der Breite und 400 Pixel in der Höhe. Einmal als lineare Animation und dann in vier Schritten.

Ein Ziel dieses Experimentes ist eine wirklich einfache Graphik mit grösseren Abmessungen, daraufhin zu untersuchen ob durch die Grösse eine Position in der Bildersuche erreicht werden kann.

Graphik fullmetalseo2013

Damit die Graphik fullmetalseo2013 erkennbar ist, werde ich diese verkleinert einbinden einmal als Bild und einmal als Hintergrundbild.

fullmetalseo2013 Animation linear

An dieser Stelle wird die Graphik fullmetalseo2013 mit einer linearen Animation eingesetzt.

@keyframes fullmetalseo2013{
0%{background-position:0 0;}
100%{background-position:100% 0;}
}
#fullmetalseo2013{
animation:fullmetalseo2013 20s infinite linear;
background:url(/artikel/seo/fullmetalseo2013.png);
width:500px;
height:400px;}

fullmetalseo2013 Animation schrittweise

Nun binden wir die Graphik fullmetalseo2013 mit einer schrittweisen Animation ein.

@keyframes schritt{
0%{background-position:0 0;}
100%{background-position:-2000px 0;}
}
#schritt{
animation:schritt 20s infinite steps(4);
background:url(/artikel/seo/fullmetalseo2013.png);
width:500px;
height:400px;}