Mobirise-Tutorials.com

Hier mal eine kleine CSS-Animation, die ich zum Einfliegen der "Breadcrumb Navigation" auf dieser Seite eingesetzt habe:

https://www.mobirise-tutorials.com/Tuto ... crumb.html

Hier die CSS:

Code: Alles auswählen

.myslide { 
 animation-duration: 3s; 
 animation-name: slidein; 
} 
@keyframes slidein {
 from { 
  margin-left: 100%; 
  width: 300%; 
 } 
 to { 
  margin-left: 0%; 
  width: 100%; 
 } 
}

Da in der CSS oben eine Breite von 300% zum Einfliegen von rechts angegeben ist, kann es bei bestimmten Elementen, wie z.B. dem Hamburger Button am mobilen Gerät zu einem Overflow (Überlauf) kommen, daher habe ich das auch noch unterbunden, indem ich diese Style-Anweisung in den Seiteneinstellungen in den Bereich "Inside <head> code" geschrieben habe:

Code: Alles auswählen

<style> 
 html { 
  overflow-x: hidden;
 }
</style>

Die class="myslide" setzt ihr dann an den Textbereich oder auch an irgendeinen <div> Bereich, der einfliegen soll.

Mobirise-Tutorials.com

Einfliegen eines Textes

Einfliegen eines Textes