<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)}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.