<div id="hg">
    <div id="santner"> </div>
    <div id="wiese1"> </div>
    <div id="wiese2"> </div>
    <div id="wiese3"> </div>
    <div id="wolke1"> </div>
    <div id="wolke2"> </div>
    <div id="adler"> </div>
    <div id="vogel"> </div>
    <div id="blume1"> </div>
    <div id="blume2"> </div>
    <div id="blume3"> </div>
</div>

#hg {
    position: relative;
    overflow: hidden;
    background: url(http://www.webdesign-klamonfra.de/bilder/Seis.JPG) no-repeat;
    height: 35.2em;
    width: 46.9em;
    font-family: Comic Sans MS;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    border-radius: 20px;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
    margin: 2em;
    z-index: 1;
}

#santner,
#wiese1,
#wiese2,
#wiese3 {
    position: absolute;
    height: 35.2em;
    width: 46.9em;
}

#santner {
    background: url(http://www.webdesign-klamonfra.de/bilder/santnerspitze.png) no-repeat;
    z-index: 10;
}

#wiese1 {
    background: url(http://www.webdesign-klamonfra.de/bilder/wiese1.png) no-repeat;
    z-index: 20;
}

#wiese2 {
    background: url(http://www.webdesign-klamonfra.de/bilder/wiese2.png) no-repeat;
    z-index: 30;
}

#wiese3 {
    background: url(http://www.webdesign-klamonfra.de/bilder/wiese3.png) no-repeat;
    z-index: 40;
}





#wolke1,
#wolke2 {
    position: absolute;
    height: 5em;
    width: 5em;
    background: url(http://www.webdesign-klamonfra.de/bilder/wolke_klein.png) no-repeat;
}

#wolke1 {
    z-index: 2;
    animation: wolke1 300s infinite linear;
}

@keyframes wolke1 {
    from{transform: scaleX(6) translate3d(-45px,40px,0)}
    to{transform: scaleX(5.7) translate3d(160px,40px,0)}
}

#wolke2 {
    z-index: 5;
    left: -135px;
    animation: wolke2 60s infinite linear 10s;
}

@keyframes wolke2 {
    from{transform: scaleX(2.3) translate3d(-60px,10px,0)}
    to{transform: scaleX(1.5) translate3d(600px,10px,0)}
}




#adler {
    position: absolute;
    left: -125px;
    height: 13.9em;
    width: 15.6em;
    background: url(http://www.webdesign-klamonfra.de/bilder/adler.gif) no-repeat;
    opacity: .9;
    z-index: 12;
    animation: adler 30s infinite linear;
}

@keyframes adler {
    from{transform: scale(.15) translate3d(-125px,40px,0)}
    to{transform: scale(.3) translate3d(2700px,450px,0)}
}

#vogel {
    position: absolute;
    left: 585px;
    height: 1.7em;
    width: 1.9em;
    background: url(http://www.webdesign-klamonfra.de/bilder/vogel.gif) no-repeat;
    opacity: .9;
    z-index: 12;
    animation: vogel 40s infinite linear;
}

@keyframes vogel {
    from{transform: scale(.5) translate3d(380px,150px,0)}
    to{transform: scale(.5) translate3d(-1300px,80px,0)}
}








#blume1,
#blume2,
#blume3 {
    position: absolute;
    top: 420px;
    left: 50px;
    transform: scale(.01);
    z-index: 25;
}

#blume1 {
    height: 2.8em;
    width: 1.9em;
    background: url(//www.webdesign-klamonfra.de/bilder/blume2.png) no-repeat;
    animation: blume1 5s forwards linear;
}

@keyframes blume1 {
    to{transform: scale(1) translateY(-45px)}
}

#blume2 {
    height: 2.8em;
    width: 1.6em;
    background: url(//www.webdesign-klamonfra.de/bilder/blume3.png) no-repeat;
    animation: blume2 6s forwards linear 1s;
}

@keyframes blume2 {
    to{transform: scale(1.2) translate3d(15px,-45px,0)}
}

#blume3 {
    height: 3.8em;
    width: 1.3em;
    background: url(//www.webdesign-klamonfra.de/bilder/blume1.png) no-repeat;
    animation: blume3 7s forwards 2s;
}

@keyframes blume3 {
    to{transform: scale(1) translate3d(40px,-30px,0)}
}