animation mit @kreyframes und mehreren Hintergrundbildern

Heute habe ich als Kombination der Eigenschaft backgrounds bzw. mehrere Hintergrundbilder (multiple backgrounds) und den @keyframes Animationen eine weitere kleine Variation meiner ersten Animation erstellt. 🙂

Hier wechseln alle 3 Hintergrundbilder ihre Position. Zudem werde ich im nächsten Schritt noch Text und weitere Grafiken einfügen, um dann als „Endziel“ einen animierten CSS3.de Banner zu haben.

 

Hier der Quelletxt:

<style>
#css3grasanim {
width: 440px;
height: 200px;
border: 20px solid #78bd35;
background: url(https://www.css3.de/upload/grass1-450x112.png) bottom left no-repeat,
url(https://www.css3.de/upload/css3-logo.png) bottom center no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom left no-repeat;
-moz-animation: pinguinwander 10s infinite alternate; /* Firefox */
-webkit-animation: pinguinwander 10s infinite alternate; /* Safari and Chrome */
-o-animation: pinguinwander 10s infinite alternate; /* Opera */
animation: pinguinwander 10s infinite alternate;
}
@-moz-keyframes pinguinwander {
0% {background: url(https://www.css3.de/upload/grass1-450x112.png) bottom left no-repeat,
url(https://www.css3.de/upload/css3-logo.png) bottom center no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom right no-repeat;}
25% {background: url(https://www.css3.de/upload/grass1-450x112.png) bottom right no-repeat,
url(https://www.css3.de/upload/css3-logo.png) bottom left no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom left no-repeat; }
50% {
background: url(https://www.css3.de/upload/grass1-450x112.png) bottom left no-repeat,
url(https://www.css3.de/upload/css3-logo.png) center left no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom right no-repeat; }
75% {
background: url(https://www.css3.de/upload/grass1-450x112.png) bottom right no-repeat,
url(https://www.css3.de/upload/css3-logo.png) bottom left no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom left no-repeat;}
100% {
background: url(https://www.css3.de/upload/grass1-450x112.png) bottom left no-repeat,
url(https://www.css3.de/upload/css3-logo.png) bottom center no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom right no-repeat; }
}
@-o-keyframes pinguinwander {
0% {background: url(https://www.css3.de/upload/grass1-450x112.png) bottom left no-repeat,
url(https://www.css3.de/upload/css3-logo.png) bottom center no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom right no-repeat;}
25% {background: url(https://www.css3.de/upload/grass1-450x112.png) bottom right no-repeat,
url(https://www.css3.de/upload/css3-logo.png) bottom left no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom left no-repeat; }
50% {
background: url(https://www.css3.de/upload/grass1-450x112.png) bottom left no-repeat,
url(https://www.css3.de/upload/css3-logo.png) center left no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom right no-repeat; }
75% {
background: url(https://www.css3.de/upload/grass1-450x112.png) bottom right no-repeat,
url(https://www.css3.de/upload/css3-logo.png) bottom left no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom left no-repeat;}
100% {
background: url(https://www.css3.de/upload/grass1-450x112.png) bottom left no-repeat,
url(https://www.css3.de/upload/css3-logo.png) bottom center no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom right no-repeat; }
}
@-webkit-keyframes pinguinwander {
0% {background: url(https://www.css3.de/upload/grass1-450x112.png) bottom left no-repeat,
url(https://www.css3.de/upload/css3-logo.png) bottom center no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom right no-repeat;}
25% {background: url(grass1.png) bottom right no-repeat,
url(https://www.css3.de/upload/css3-logo.png) bottom left no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom left no-repeat; }
50% {
background: url(https://www.css3.de/upload/grass1-450x112.png) bottom left no-repeat,
url(https://www.css3.de/upload/css3-logo.png) center left no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom right no-repeat; }
75% {
background: url(https://www.css3.de/upload/grass1-450x112.png) bottom right no-repeat,
url(https://www.css3.de/upload/css3-logo.png) bottom left no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom left no-repeat;}
100% {
background: url(https://www.css3.de/upload/grass1-450x112.png) bottom left no-repeat,
url(https://www.css3.de/upload/css3-logo.png) bottom center no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom right no-repeat; }
}
@keyframes pinguinwander {
0% {background: url(https://www.css3.de/upload/grass1-450x112.png) bottom left no-repeat,
url(https://www.css3.de/upload/css3-logo.png) bottom center no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom right no-repeat;}
25% {background: url(https://www.css3.de/upload/grass1-450x112.png) bottom right no-repeat,
url(https://www.css3.de/upload/css3-logo.png) bottom left no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom left no-repeat; }
50% {
background: url(https://www.css3.de/upload/grass1-450x112.png) bottom left no-repeat,
url(https://www.css3.de/upload/css3-logo.png) center left no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom right no-repeat; }
75% {
background: url(https://www.css3.de/upload/grass1-450x112.png) bottom right no-repeat,
url(https://www.css3.de/upload/css3-logo.png) bottom left no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom left no-repeat;}
100% {
background: url(https://www.css3.de/upload/grass1-450x112.png) bottom left no-repeat,
url(https://www.css3.de/upload/css3-logo.png) bottom center no-repeat,
url(https://www.css3.de/upload/grass2-450x112.png) bottom right no-repeat; }
}
</style>
<div id="css3grasanim"></div>

(Quelle der Gras-Clipart:) http://openclipart.org/detail/1343748940.svg (Quelle der Pinguin-Clipart:) Pinguin-Clipart