<div id="wolken5">
    <img src="http://www.webdesign-klamonfra.de/bilder/wolke.png" alt=""
      width="140" height="167" id="wolke51">
    <img src="http://www.webdesign-klamonfra.de/bilder/wolke.png" alt=""
      width="140" height="167" id="wolke52">
    <img src="http://www.webdesign-klamonfra.de/bilder/wolkedunkel.png" alt=""
      width="140" height="167" id="wolke53">
    <img src="http://www.webdesign-klamonfra.de/bilder/wolkedunkel.png" alt=""
      width="140" height="167" id="wolke54">
    <img src="http://www.webdesign-klamonfra.de/bilder/wolkedunkel.png" alt=""
      width="140" height="167" id="wolke55">
    <img src="http://www.webdesign-klamonfra.de/bilder/wolke.png" alt=""
      width="140" height="167" id="wolke56">
</div>
#wolken5 {
    position: relative;
    overflow: hidden;
    height: 34em;
    background: linear-gradient(#1f4778,#4584b4);
    border-radius: 30px;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
    margin: 2em;
}

#wolke51,
#wolke52,
#wolke53,
#wolke54,
#wolke55,
#wolke56 {
    position: absolute;
}

#wolke51 {
    animation: wolke51 50s infinite linear;
}

@keyframes wolke51 {
    from{transform: scale(2) translate3d(-130px,100px,0)}
    to{transform: scale(1.5) translate3d(670px,100px,0)}
}

#wolke52 {
    left: 435px;
    animation: wolke52 20s infinite linear;
}

@keyframes wolke52 {
    from{transform: scale(.01)}
    to{transform: scale(1.3) rotate(30deg) translate3d(-90px,-130px,0)}
}

#wolke53 {
    animation: wolke53 60s infinite linear;
    z-index: 1;
}

@keyframes wolke53 {
    from{transform: scale(1.3) translate3d(-210px,270px,0)}
    to{transform: scale(1) rotate(10deg) translate3d(720px,120px,0)}
}

#wolke54 {
    animation: wolke55 100s infinite linear;
}

#wolke55 {
    left: -135px;
    animation: wolke55 100s infinite linear 50s;
}

@keyframes wolke55 {
    from{transform: scaleX(7) translate3d(-80px,350px,0)}
    to{transform: scaleX(10) translate3d(130px,350px,0)}
}

#wolke56 {
    left: -135px;
    animation: wolke56 40s infinite linear 20s;
}

@keyframes wolke56 {
    from{transform: scaleX(2) translate3d(-30px,50px,0)}
    to{transform: scaleX(2.5) rotate(5deg) translate3d(400px,-40px,0)}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.