Forum - Css Animation - Laufende Grafik

Ich habe mal eine Frage, habe eine Css Animation erstellt, wo ein Nikolaus über einem Banner läuft, vom Anfang bis Ende und das wiederholt sich. Hatte es dann auch geschafft, dass er seinen Weg zurück läuft, nur dann läuft er rückwärts. Müsste ich eine neue Grafik einfügen, damit er nicht rückwärts läuft oder gibt es auch eine Css, dass er die Grafik rumdreht, wenn er den Weg zurück läuft.

Hallo Nara ich weiß jetzt nicht, ob dir die Erklärung hilft fürs automatisches Drehen des Bildes beim Gehen.

Hier hatte ich es getestet, mit einem Pinguin, der bewegt sich links auf der Stelle, sieht so aus.

Bild:
Pinguin



Hier mal der CSS Code:

.pinguin {
  width: 25px;
  height: 45px;
  bottom: 50%;
  position: fixed;
  animation: gehen 25s linear infinite;
}
 
@keyframes gehen {
  0%, 100% { 
    left: 0;    
    transform: translatex(-50%) scalex(-1); 
  }
   49% { 
    left: 100%; 
    transform: translatex(-50%) scalex(-1); 
  }
    50% { 
     left: 100%; 
     transform: translatex(-50%) scalex(1);  
  }
     99% { 
      left: 0;   
      transform: translatex(-50%) scalex(1);      }
}
 

<div class="pinguin"><img src="//files.homepagemodules.de/b906480/a_328_c78c8eeb.gif"></div>
 

Danke, Daishi. Ich komme damit nicht so klar. Habe grad mal angefangen mich mit der Css Animation zu beschäftigen und habe da noch arge Probleme. Ich schicke Dir mal, was ich zusammengebastelt habe. Den Input hatte ich aus anderem Forum und habe das für mich umgeschrieben. Aaaaaaber der Nikolaus läuft rückwärts aber ist halt nicht gedreht. Mit deinem Code hat es in dieser Konstellation nicht funktioniert.

<div class="Oberlauf">
<div class="oberleiste0">
<div class="Wald">
<div class="Leiste">
</div>
<div class="niko"></div>
</div></div>
<div id="kopfteil">
<h6>Wir wünschen allen Mitgliedern und Gästen ein schönes Weihnachtsfest.
</h6></div>
</div>
<style>
 h6
{
  font-size: 25px !important;
  text-transform: uppercase;
  font-family: VERDANA,ARIAL,HELVETICA;
background: url(https://abload.de/img/glitzergoldipft7.jpg);
color: #fff;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  padding: 0;
 -webkit-text-stroke: 1px #403d37;
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: rgb(64, 61, 55);
  padding: 5px;
  } 
  
  
.Oberlauf
{border:1px solid green;
        margin-left:4%;
margin-right:4%;
margin-top: 7px !important;
margin-bottom: 31px;
    border: 2px ridge #f5e091;
  margin-left: 0%;
  margin-right: 14%;
  margin-top: -12px;
  margin-bottom: 26px !important;
  max-width: 1418px;
  width: 100%;
  text-align: center; 
    border-radius:10px;
}
#kopfteil {  
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
background: linear-gradient(#e5eaf3 , #acb9cf);
padding: 1px;
height: auto;
text-align:center;
 border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;   
 
}
.niko {
background: url(//files.homepagemodules.de/b855319/a_191_28d44d5d.gif) no-repeat right;
background-size: 72px;
padding-top: 0px;
height: 156px;
right: 0;
    text-align: right;
    animation:geht 20s linear infinite alternate ;
  }
 
@keyframes geht {
   
from {background-position: -6%, 110%;}
to {background-position: 110%, 110%;}
}
 
    
.Wald {
background: url(https://i.postimg.cc/Pr0PdsK4/waldani.png)bottom center;
padding: 0;
height: 135px;
animation: ziehen 370s infinite linear;
 
}
 
.oberleiste0{
 background: linear-gradient(180deg, rgb(209, 219, 228) 0%, rgb(174, 192, 204) 31%, rgb(255, 255, 255) 99%)!important;   
background-image:url(https://i.postimg.cc/7YNdFGkd/himmel.jpg);
padding: 0;
margin-left:4%;
margin-right:4%;
height: 130px;
width:100%;
border-bottom: 0 solid #333;
margin: auto auto;
vertical-align: middle;
  border-radius:8px;   
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
}
.oberleiste0 {
animation: ziehen 750s infinite linear;
}
@keyframes ziehen {
from {background-position: 0 0;}
to {background-position: -9999px 0;}
 }
</style>
 

Hallo Nara ich habe es mal angepasst, hoffe, es ist so ok.

Habe es aber im Forum nicht getestet, habe es nur im CodePen bearbeitet. Ich hoffe das es so in Ordnung ist.

Hier mal der neue Code:

<div class="oberleiste0">
<div class="Wald">
<div class="Leiste">
</div>
<div class="niko"><img src="//files.homepagemodules.de/b855319/a_191_28d44d5d.gif"></div>
</div></div>
<div id="kopfteil">
<h6>Wir wünschen allen Mitgliedern und Gästen ein schönes Weihnachtsfest.
</h6></div>
</div>
<style>
h6
{
font-size: 25px !important;
text-transform: uppercase;
font-family: VERDANA,ARIAL,HELVETICA;
background: url(https://abload.de/img/glitzergoldipft7.jpg);
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
padding: 0;
-webkit-text-stroke: 1px #403d37;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgb(64, 61, 55);
padding: 5px;
}
 

.Oberlauf
{border:1px solid green;
margin-left:4%;
margin-right:4%;
margin-top: 7px !important;
margin-bottom: 31px;
border: 2px ridge #f5e091;
margin-left: 0%;
margin-right: 14%;
margin-top: -12px;
margin-bottom: 26px !important;
max-width: 1418px;
width: 100%;
text-align: center;
border-radius:10px;
}
#kopfteil {
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
background: linear-gradient(#e5eaf3 , #acb9cf);
padding: 1px;
height: auto;
text-align:center;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
 
}
 
.niko {
  width: 25px;
  height: 215px;
  bottom: 50%;
  position: fixed;
  animation: gehen 25s linear infinite;
}
 
@keyframes gehen {
  0%, 100% { 
    left: 0;    
    transform: translatex(-50%) scalex(1); 
  }
   49% { 
    left: 100%; 
    transform: translatex(-50%) scalex(1); 
  }
    50% { 
     left: 100%; 
     transform: translatex(-50%) scalex(-1);  
  }
     99% { 
      left: 0;   
      transform: translatex(-50%) scalex(-1);      }
}
 
 
.Wald {
background: url(https://i.postimg.cc/Pr0PdsK4/waldani.png)bottom center;
padding: 0;
height: 135px;
animation: ziehen 370s infinite linear;
 
}
 
.oberleiste0{
background: linear-gradient(180deg, rgb(209, 219, 228) 0%, rgb(174, 192, 204) 31%, rgb(255, 255, 255) 99%)!important;
background-image:url(https://i.postimg.cc/7YNdFGkd/himmel.jpg);
padding: 0;
margin-left:4%;
margin-right:4%;
height: 130px;
width:100%;
border-bottom: 0 solid #333;
margin: auto auto;
vertical-align: middle;
border-radius:8px;
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
}
.oberleiste0 {
animation: ziehen 750s infinite linear;
}
@keyframes ziehen {
from {background-position: 0 0;}
to {background-position: -9999px 0;}
}
 
</style>
 
 

Vielen Dank, habe das bottom geändert und er bleibt leider nicht im Banner, er läuft von einem Rand zum anderen und nicht nur innerhalb des Banners, vom einen Ende zum anderen. Wo kann man das ändern?

Frage welche Bannergröße? Welche Position. Alles muss neu eingestellt werden mit den x-y-Achse, wie weit sie laufen muss.

Das ist dann etwas schwerer, da diese neu berechnet werden muss. Wenn mich nicht alles täuscht, war es vorher, wo ich das gemacht habe, 1418px, richtig?

Ach je. Für einen Anfänger bestimmt zu schwer. Habe bei Codepen geschaut, da sieht man ja den Banner, reicht hier nicht die Bannergröße? Weil innerhalb dieses Banners sollte er laufen oder vielleicht könnte ich das auch so lösen, dass ich einfach eine 2. Animation einbaue, wo ich die gedrehte Grafik einfüge. Weiß aber nicht, ob das geht, müsste ich probieren.

Ich schaue mal, was ich machen kann, jedenfalls in CodePen zeigte es mir die ganze Breite an in 1418 Pixel, daraufhin habe ich die Bewegungen angepasst.

Ich muss gleich wieder los zu einem Kunden Kehrdienst machen, danach, wenn ich dort fertig bin, setze ich mich daran und mache es auf eine Bannergröße. Weiß aber nicht genau, wann ich damit fertig werde, aber ich gebe mir Mühe.

Ich hoffe, das ist dann in Ordnung so, oder gib mir die Vorgaben wie hoch das Banner ist und wie breit. Wichtig ist, ob das Banner links, rechts, oder mittig sitzt ist auch wichtig für die Position und Berechnung der x-y-Achsen.

Das wäre sehr lieb, wenn du das noch machen könntest.

Habe dir mal eine PN geschickt.

Hab gerade gesehen, bei meinem Script hat der oberste Div gefehlt. Habs mal bei dem Script ergänzt.

<div class="Oberlauf">