Forum - Bewegte Bilder - Neue Idee und Inspiration

<!-- Bewegte Animation -->
<style>
.BewegteAnimation {
  z-index:999999;
  bottom: 5%;
  position: fixed;
  animation: gehen 150s linear infinite;
}
.BewegteAnimation img{
  width: auto;
}
.BewegteAnimation:hover{
  cursor:pointer;
}
 
/* Bild - Läuft schräg über den Monitor und zurück */
@keyframes gehen {
  0%, 100% { 
    left: -10%;    
    transform: translatex(-50%) scalex(-1); 
  }
  
  49% { 
    left: 110%; 
    bottom: 90%;
    transform: translatex(-50%) scalex(-1); 
  }
  
  50%, 99% { 
    transform: translatex(-50%) scalex(1);    
  }
}
</style>
 
<div class="BewegteAnimation">
  <img src="https://files.homepagemodules.de/b104774/a_657_2bb30dd1.gif">
</div>
 
<script>
  $('.BewegteAnimation').on('click',function(){$(this).fadeOut(5000);}).find('img').delay(20000).fadeOut(5000);
</script>
 

<!-- Bewegte Animation -->
<style>
.BewegteAnimation {
  z-index:999999;
  bottom: 5%;
  position: fixed;
  animation: gehen 150s linear infinite;
}
.BewegteAnimation:hover{
  cursor:pointer;
}
  
/* Text - Läuft schräg über den Monitor und zurück */
@keyframes gehen {
  0%, 100% {
    left: 5%; 
    transform: translatex(-50%) scalex(1); 
  }
  
  50% { 
    bottom: 90%;
    left: 85%; 
  }
}
</style>
 
<div class="BewegteAnimation" style="width:auto; padding:10px;box-shadow:2px 2px 6px #aaaaaa !important;border-radius:10px;">
  Wichtige Informationen für die Forum-Mitglieder!
  <br>
  Folgende Themen sind zu beachten!
</div>
 
<script>
  $('.BewegteAnimation').on('click',function(){$(this).fadeOut(5000);}).find('img').delay(20000).fadeOut(5000);
</script>