CSS Animation von Oben nach Unten durchlaufen lassen?

Hallo liebe Forumleser :)

Ich würde gerne einen Text von Oben nach Unten durchlaufen lassen :), am besten mit CSS - da Marquee nicht mehr Aktuell ist.

Ich bin noch Anfänger was CSS angeht :)

Ich habe es bisher geschafft den Text vom gewünschten Platz von Oben nach Unten laufen zu lassen, jedoch läuft der Text nicht DURCH sondern setzt sich (wenn das erste Wort den Endpunkt erreicht hat) wieder auf den Startpunkt zurück. Wie verhindere ich das zurücksetzen und mache ein Durchlaufen daraus?

Dankeschön an alle.

Schöne Woche noch!

.object {
    animation: MoveUpDown 5s linear infinite;
    position: absolute;
    left: 0;
    bottom: 0;
}
@keyframes MoveUpDown { 0% { bottom: 70%; } 100% { bottom: 20%; }

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, CSS

17.02.2020, 10:30

CSS Animation von Oben nach Unten durchlaufen lassen?

<!doctype html>
<title>marquee</title>
<style>
.object {
    animation: marqueeDown 5s linear infinite;
    position: absolute;
}
@keyframes marqueeDown {
    0% {
        bottom:100vH
    }
    100% {
        bottom: 0vH
    }
</style>
<div class="object">hello world!</div>

Alex

ExZorroHD

Beitragsersteller

17.02.2020, 10:37

Hi :)

Danke erstmal!

.object {
    animation: marqueeDown 5s linear infinite;
    position: absolute;
}

@keyframes marqueeDown {
    0% {
        bottom: 78.5vH;
    }
    100% {
        bottom: 20vH;
    }

Das Problem ist das der Text sich trotzdem zurücksetzt.

Also z.b Hallo Welt.

Wenn das Hallo noch unten ist soll oben schon wieder "Welt" Rauskommen. Also jeden Buchstaben durchlaufen und wenn er über 20vH (sowas wie %?) ist wieder Oben rauskommt :) und nicht den ganzen Text auf 0% zurücksetzen.

Hoffe es ist verständlich.

(Wie bei N-TV der Text in dem Balken)

EinAlexander

17.02.2020, 10:44

@ExZorroHD

Wenn das Hallo noch unten ist soll oben schon wieder "Welt" Rauskommen.

Dafür musst Du zwei versetzte Animationen bauen. Du packst z. B. das "hello" in eine Animation und das "world" in eine separate Animation.

ExZorroHD

Beitragsersteller

17.02.2020, 10:48

@EinAlexander

Sicher?

Kann mir nicht Vorstellen das das so viel Arbeit ist...

Sowas wie Marquee gibt es nicht? :(

Ich kann dohcn icht für jeden Buchstaben/Word eine eigene Animation machen!

https://werner-zenk.de/html/lauftext_marquee.php

Einfach so durchlaufen :(?

Danke aber...

RakonDark

17.02.2020, 10:52

@ExZorroHD

du könntest einen sichbaren ausschnitt wählen .
https://www.mediaevent.de/css/visualeffects-clip.html

EinAlexander

17.02.2020, 10:55

@ExZorroHD

https://werner-zenk.de/html/lauftext_marquee.php

Das verhält sich exakt so, wie in meinem Beispiel. Erst wenn der gesamte Text untern "verschwunden" ist taucht er oben wieder auf.

RakonDark

17.02.2020, 10:57

@RakonDark

aber das eine unten und das andere gleichzeitig oben , das wird man nur mit mehreren schaffen , ja musst du , wenn das deine frage ist , zeile für zeile , soviel arbeit ist das auch nicht . oder du lässt den schnickschnack einfach mal weg , ist eh nicht schick .

ExZorroHD

Beitragsersteller

17.02.2020, 11:05

@RakonDark

Geht ja darum das ich lerne wie es geht :)

dachte nur es gibt was wie marquee weil über 300 Buchstaben zu Animieren.

Nein lass mal :( ich suche mal weiter.

Danke euch!

EinAlexander

17.02.2020, 11:13

@ExZorroHD

Ich kann dohcn icht für jeden Buchstaben/Word eine eigene Animation machen!

Musst Du gar nicht. Du kannst immer dieselbe Animation nehmen und eben zeitversetzt ablaufen lassen. Hier ein Beispiel einer 10-zeiligen Animation die sich so verhält, wie Du das wünschst:

<!doctype html>
<title>marquee</title>
<style>
.object div {
    animation: vertical 5s linear infinite;
    position: absolute;
    left: 0;
    bottom:-1em;
}

.object div:nth-child(1) { animation-delay:0.0s }
.object div:nth-child(2) { animation-delay:0.1s }
.object div:nth-child(3) { animation-delay:0.2s }
.object div:nth-child(4) { animation-delay:0.3s }
.object div:nth-child(5) { animation-delay:0.4s }
.object div:nth-child(6) { animation-delay:0.5s }
.object div:nth-child(7) { animation-delay:0.6s }
.object div:nth-child(8) { animation-delay:0.7s }
.object div:nth-child(9) { animation-delay:0.8s }
.object div:nth-child(10) { animation-delay:0.9s }

@keyframes vertical {
    0% {
        bottom:100vH
    }
    100% {
        bottom: -1em
    }
</style>
<section class="object">
<div>Zeile 1</div>
<div>Zeile 2</div>
<div>Zeile 3</div>
<div>Zeile 4</div>
<div>Zeile 5</div>
<div>Zeile 6</div>
<div>Zeile 7</div>
<div>Zeile 8</div>
<div>Zeile 9</div>
<div>Zeile 0</div>
</section>

RakonDark

17.02.2020, 11:31

@ExZorroHD

wie kommst du immer auf buchstaben ? du musst doch nur zeilen machen . z.b. von rechts nach links etc
du kannst doch mit minus werten arbeiten und margin
hier mal ein einfaches beispiel ,

https://jsfiddle.net/38abkrqj/1/

ExZorroHD

Beitragsersteller

17.02.2020, 11:34

@RakonDark

Ich Schau es mir an :

danke euch zwei!

Ähnliche Beiträge

Wie kann man für ein HTML-Objekt 2 CSS-Keyframe-Animationen abspielen lassen?

Also ich möchte, dass das Objekt, bspw. ein Quadrat, das unsichtbar ist, zuerst langsam erscheint und in der nächsten Animation sich dann unaufhörlich bewegt. Das alles möchte mithilfe von CSS-Keyframes machen.

Wie geht das?

...zum Beitrag

CSS rollender Ball mit Bild?

Guten Tag,

ich habe in CSS einen rollenden Ball programmiert. Dieser rollt auch ist aber unsichtbar obwohl ich ein background: url gesetzt habe.

.circle {
    display: block;
    width: 100px;
    height: 100px;
    background: url("logo.png");
    border-radius: 50%;
   
    -webkit-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    -moz-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    -ms-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    
    position: absolute;
    left: 0;
  }

Das Bild gibt es und die Rotation auch, ist aber nicht wichtig.

...zum Beitrag

Eingabefeld als Marquee ausgeben HTML?

Hey,

ich möchte eine Website programmieren bei der, der in ein Textfeld eingegebene Text sofort als Marquee/Laufschrift groß auf der Website angezeigt wird. Am besten wäre wenn das ganze nur mit HTML und CSS läuft.

Danke im voraus ^^

...zum Beitrag

Menü margin geht nicht?

Hallo,

ich habe folgenden Code:

HTML:

<div id="menu">
            <a href="euro-franken.html">Euro in Schweizer Franken</a>
            <a href="euro-krone.html">Euro in Schweizer Franken</a>
            <a href="euro-pfund.html">Euro in Schweizer Franken</a>
    </div>

CSS:

#menu {
  width: 45%;
  padding: 20px;
  display: none;
  min-height: 100%;
  background-color: rgb(71, 91, 107);
  position: fixed;
  z-index: 2;
  animation: fadeIn 0.8s;
}


@keyframes fadeIn {
  from {
    width: 0%;
  }
  to {
    width: 45%;
  }
}


#menu a {
  text-decoration: none;
  color: white;
  text-align: left;
  margin-bottom: 50px;
  border: 2px solid black;
  }

Nun macht der aber kein Abstand zwischen den Links. Warum nicht?

...zum Beitrag

JavaScript Text animation?

Hi,

ich will so eine Text-Animation auf einer Seite, wo Zitate durch die Seite gehen. Von Links nach rechts. Wenn das jeweilige Zitat dann auf der rechten Seite der Seite angekommen ist, sollte es wieder auf der linken Seite erscheinen. Hat jemand eine Idee wie man das machen könnte? Ich habe es mit "Keyframes" in "Css" ausprobiert, aber wenn ich mehrere Zitate mit unterschiedlicher Länge benutze, verändert sich das Tempo der jeweiligen Sätze, obwohl ich die "animation-duration" festgelegt habe.

Vielen Dank für Eure Hilfe!

...zum Beitrag

Css Elemente nebeneinander und nicht untereinander?

Wie kann ich diese Elemente so positionieren, dass sie nebeneinander und nicht untereinander sind?

HTML:

  <div>
    <div v-for="recipe in recipes" :key="recipe.id">
      <div class="recipe">
        <img class="recipe-img" :src="recipe.img" alt="" />
        <div class="recipe-description">
          <h3 class="recipe-title">{{ recipe.title }}</h3>
          <h4 class="recipe-time">
            <i class="far fa-clock"></i> {{ recipe.time }} Minutes
          </h4>
          <h4 class="level">
            <i class="far fa-check-circle"></i> {{ recipe.level }} to make
          </h4>
        </div>
      </div>
    </div>
  </div>

CSS:

.recipe-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}


.recipe {
  margin: 30px;
}


.recipe-description {
  text-align: center;
  margin-top: 10px;
  border: 1px solid #444;
  border-top: none;
  padding: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #444;
  color: white;
  width: 300px;
}


.recipe-title,
.recipe-time,
.recipe-level {
  margin: 5px;
}

...zum Beitrag

Css Animation bleibt nicht so am ende wie gewünscht?

Warum resettet sich das immer zurück auf width 10% obwohl ich immernoch den Focus auf dem Element #i habe

#i{
    width: 10%;
}
#i:focus{
    animation: tap 2s;
}
@keyframes tap {
    from{width:10%}
    to{width: 20%;}
}
<input type="text" id="i">

Also das soll ein input feld sein das dann halt bisschen breiter werden soll wenn man draufklickt.

Und wenn man es verlässt soll es wieder auf den normalzustand.

...zum Beitrag

CSS: Wie kann ich die Unterlinie des Texts wegbekommen?

Hallo. Irgendwie geht die text-decoration bei mir nicht weg. Bitte helft mir.

HTML:

 <button class="cn"><a href="#">create</a></button>

CSS:

.cn {
  text-decoration: none;
  width: 160px;
  height: 40px;
  background: #23002f;
  border: none;
  margin-bottom: 10px;
  margin-left: 20px;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: .4s ease;
  margin-left: 350px;
  margin-top: 5px;
}

...zum Beitrag

HTML CSS bild verschieben funktioniert nicht?

Hey,
Ich möchte gerne das eine Bild nach links oben verschieben, nur weiß ich nicht wie. Hab auch schon padding, margin und align-item versucht nix hat funktioniert-_-.

schonmal danke im vorraus
Liebe Grüße
Lucas

...zum Beitrag

HTML/CSS/JS Sections einfliegen lassen?

Hi, ich arbeite gerade an einer Website, nun möchte ich, dass wenn man scrollt, die jeweilige section einfliegt (von links). Ich komme aber nicht richtig weiter, wäre nett, wenn mir jemand helfen kann.

...zum Beitrag

CSS Animation vor Redirect?

Hallo, ich hatte schonmal so eine ähnliche Frage gestellt aber bekomme es einfach nicht hin. Nun hab ich eine kleine Testumgebung gebaut, in der ich folgendes möchte:

Die Eingangsanimation spielt sich automatisch ab wenn die Seite geladen ist. Klicke ich auf den Go-Button in der Mitte (Später sollte das bei jedem Button passieren der eine bestimmte Klasse hat) dann soll der Klasse "intro" die Klasse "animation_out" hinzugefügt werden. Nach einer bestimmten Zeit (Am besten händisch per Ms änderbar) soll dann erst der Redirect erfolgen.

Gibt es da eine EINFACHE Lösung für Anfänger wie mich?

XXXXXXXX_____HTML_____XXXXXXXX

XXXXXXXX_____CSS_____XXXXXXXX

body{
margin: 0;
padding: 0;
}

.intro{
width: 100%;
height: 100vh;
position: fixed;
z-index: 9999;
padding: 0;
background-color: #000;
overflow: hidden;
pointer-events: none;
-webkit-animation: animation_in 1s 1; /* Safari 4.0 - 8.0 /
animation: animation_in 1s 1;
animation-fill-mode: forwards;
}

@keyframes animation_in {
0% {height: 100%;}
100% {height: 20px;}
}

.animation_out{
-webkit-animation: animation_out 1s 1; /* Safari 4.0 - 8.0 /
animation: redirectanimationout 1s 1;
}

@keyframes redirectanimationout {
0% {height: 20px;}
100% {height: 100%;}
}

.testbutton{
position: absolute;
background-color: #000;
color: #fff;
width: 50px;
padding: 5px 0;
text-align: center;
float: 0 auto;
margin-top: 50vh;
margin-left: calc(50% - 25px);
}

...zum Beitrag

CSS keyframe Animation über JS mehrmals abspielen lassen?

Hallo, Wie ihr es schon aus der Frage entnehmen könnt, versuche ich eine Keyframe animation via JavaScript zu aktivieren. Jedoch habe ich das problem, dass sich diese animation nur einmal abspielen lässt. Könnt ihr mir bitte sagen woran das liegen könnte und mir dabei helfen den code zu vervollständigen? Hier der Code:

<head>
    <title>Beispiel</title>
    <style>
        #y {
            height: 50px;
            position: relative;
            top: 20;
            color: rgba(100, 100, 100, 0);
        }
        #y:active{
            animation: showEffect 0.5s;
        }
    @keyframes showEffect {
        0% {
            content: 'ICH';
            top: 20;
            color: rgba(100, 100, 100, 0);
        }
        20% {
            top: 10;
            color: rgba(100, 100, 100, 1);
        }
        100% {
            top: 0;
            color: rgba(100, 100, 100, 0);
        }
    }
    </style>
</head>
<body>
    <div id="container" align="center">
        <div id="y"></div>
        <br>
        <br>
        <input type="button" value="On" onclick="showEffect()">

        <script>
            function showEffect() {
                var on = 1;
                if (on == 1) {
                    document.getElementById('y').innerHTML = "A";
                    document.getElementById('y').style.animation = "showEffect 0.5s";
                    on = 0;
                } else {
                    document.getElementById('y').innerHTML = "B";
                    document.getElementById('y').style.animation = "showEffect 0.5s";
                    on = 1;
                }
            }
        </script>
    </div>
</body>

...zum Beitrag

HTML CSS Hover Animation?

Hallo. Ich versuche eine eigene Website zu erstellen mit HTML und CSS. Nun bin ich auf ein Problem gestoßen. Ich versuche seit langem eine Hover Animation auf ein Text einzufügen. Den CSS Code habe ich von der Webseite ui-snippets.dev . Ich bekomme die Hover Animation nicht zum Funktionieren. Die Animation kommt nur wenn ich beim content ein Text eingebe. Dann ist aber die Animation viel zu groß, da die große vom eingegeben Content Text benutz wird.

Bilder vom Code im Anhang.

...zum Beitrag

CSS3-Keyframe-Aninationen bei mouseout rückgängig machen?

Hi, ich habe diese Keyframe-Animationen in CSS gemacht:

nav:hover #strich1 {
    animation: strich1 0.5s ease-out 0s 1 normal forwards;
}
nav:hover #strich2 {
    animation: strich2 0.5s ease-out 0s 1 normal forwards;
}
nav:hover #strich3 {
    animation: strich3 0.5s ease-out 0s 1 normal forwards;
}
@keyframes strich1 {
    from {
        transform: rotate(0deg);
        width: 24px;
    }
    to {
        transform: rotate(45deg);
        width: 30px;
    }
}
@keyframes strich2 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes strich3 {
    from {
        transform: rotate(0deg);
        width: 24px;
    }
    to {
        transform: rotate(-45deg);
        width: 30px;
    }
}

möchte ihr allerdings auch, dass sie sobald die Maus den Navigationsbereich(<nav>) wieder verlässt die Animationen wieder rückwärts ablaufen, weiß allerdings noch nicht so ganz wie. Ich habe es bereits so versucht:

nav:not(:hover) #strich1 {
    animation: strich1 0.5s ease-out 0s 1 reverse forwards;
}
...

und so:

nav #strich1 {
    animation: strich1 0.5s ease-out 0s 1 reverse forwards;
}
...

Hat allerdings beides nicht den gewünschten Effekt gebracht. Wisst ihr wie ich das machen könnte? Gibt es vllt eine Art Gegenteil-Pseudoklasse zu :hover? Wisst ihr da Abhilfe? Ansonsten hatte ich mir noch überlegt mit JavaScript nach dem feuern des mouseout events die Animation rückgängig zu machen wenn das mit CSS gar nicht geht.

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen