bewegtes bild selber bau

by basti1012

HTML

<div id="alles">


<div id="rand"></div>

<div id="beweg1" class="beweg1">
<img src="https://d181fhzpeyu8q9.cloudfront.net/fotos/0/3/1024/576/80/FFFFFF/http%3A%2F%2Ffoto-origin.images-tiscover.com%2Fat%2Fimages%2FRGN%2F280%2FRGN102280at%2Fregion-villach-faaker-see-ossiacher-see-kaernten-2sqwf.jpg/7Axei2WNj0EpGYY5gOgpoA%3D%3D/z/7/region-villach-faaker-see-ossiacher-see-kaernten-2sqwf.jpg" width="400" height="300"></div> 

<div id="beweg2" class="beweg2">
<div align="center" style="overflow: hidden; width: 400px; height: 150px;">
<img style="position:relative; top: -150px; left: 0px;" src='https://d181fhzpeyu8q9.cloudfront.net/fotos/0/3/1024/576/80/FFFFFF/http%3A%2F%2Ffoto-origin.images-tiscover.com%2Fat%2Fimages%2FRGN%2F280%2FRGN102280at%2Fregion-villach-faaker-see-ossiacher-see-kaernten-2sqwf.jpg/7Axei2WNj0EpGYY5gOgpoA%3D%3D/z/7/region-villach-faaker-see-ossiacher-see-kaernten-2sqwf.jpg' width="400" height="300"></div></div>

 <div id="beweg3" class="beweg3">
<div align="center" style="overflow: hidden; width: 400px; height: 120px;">
<img style="position:relative; top: -180px; left: 0px;" src='https://d181fhzpeyu8q9.cloudfront.net/fotos/0/3/1024/576/80/FFFFFF/http%3A%2F%2Ffoto-origin.images-tiscover.com%2Fat%2Fimages%2FRGN%2F280%2FRGN102280at%2Fregion-villach-faaker-see-ossiacher-see-kaernten-2sqwf.jpg/7Axei2WNj0EpGYY5gOgpoA%3D%3D/z/7/region-villach-faaker-see-ossiacher-see-kaernten-2sqwf.jpg' width="400" height="300"></div></div>
</div>

CSS

#alles{
  position:absolute;
  top:50px;
  left:50px;
  height:300px;

  background:yellow;
 
  width:400px;

}







#rand{
  position:absolute;
  top:0px;
  left:0px;
  height:285px;
  z-index:4;
  background:transparent;
  border:12px solid black;
  width:385px;
    overflow:hidden;
}



.beweg1{
  position:absolute;
  width:400px;
  height:300px;
  left:0px;
  top:0px;
  background:red;
 
 border:3px solid black;
}

.beweg2{
  position:absolute;
  left:0px;
  top:150px;
  background:blue;
opacity:1;

 animation: be 1s alternate infinite linear; 
}
 
 .beweg3{
  position:absolute;
  left:0px;
  top:182px;
  background:blue;
opacity:0.7;

  animation: be 2s alternate infinite linear; 
}
@keyframes be{
0%{
  left:0px;
  }
 100%{
   left:5px;
   }
}