CSS Animation von Oben nach Unten durchlaufen lassen?

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.

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>