CSS Per Animation Text einblenden/ausblenden, neuen Text einblenden usw. endlos..

Guru-Meditation · 25. Juli 2025

Moin,

Frage an die CSS Experten - ich bin keiner sonst würde ich jetzt nicht die folgende Frage stellen!

Ich habe folgendes...

HTML
<div#fader>
1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
2. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
...hier möchte ich das ganze erweitern und scheitere!
</div>

CSS
@keyframes test { 0%, 50% { opacity: 0; } 100% { opacity: 1; z-index:10; } }

div#fader { position: relative; padding: inherit }
div#fader p { position: absolute; left:0; right:0; animation-name: test; animation-fill-mode: both; animation-iteration-count: infinite; animation-duration: 4s }

div#fader p:first-of-type { animation-direction: alternate-reverse }
div#fader p:last-of-type { animation-direction: alternate }
..wenn oben 3. dazu kommt, muss hier wohl auch erweitert werden, und genau hier komme ich nicht weiter.

Was passiert hier jetzt... 1. wird eingebledent..ausgeblendet.. 2. wird eingeblendet..ausgeblendet..und dann endlose Wiederholung, alles ist flüssig und es funktioniert gut aber, es ist mir unmöglich hier noch ein 3+ einzufügen damit das ganze wie mit nur zwei funktioniert. Hab alles mögliche versucht, entweder ist das nicht möglich und ich muss doch alles mit JS machen oder aber ich sehe den Berg vor lauter Bäumen nicht.

Was brauche ich? das nach 2. nicht wieder 1. eingeblendet wird sondern 3. und erst dann 1. usw. also 1..2..3..1..2..3..1..2..3 usw.

Eventuell kennt sich ein CSS-Expertos aus?

floq0r · 25. Juli 2025

Die Animation blendet das Element von 50% bis 100% der Animationslaufzeit ein. Für das erste p-Element läuft die Animation rückwärts (animation-direction: alternative-reverse; ), dadurch entsteht der Effekt, dass die p-Elemente abwechselnd sichtbar sind. Wenn du das mit einem dritten oder mehr Elementen realisieren willst würde ich für jedes Element eine eigene Animation mittels Keyframes festlegen damit das Timing stimmt und dann per :nth-of-type() zuweisen.

Guru-Meditation · 25. Juli 2025

@floq0r
Danke, sowas habe ich mir schon gedacht..ok, Wochenendbeschäftigung gefunden

floq0r · 25. Juli 2025

Ist das schon das eigentliche Ziel oder steckt da ein größeres Vorhaben dahinter? Vielleicht gibt es noch eine bessere Gesamtlösung.

Guru-Meditation · 25. Juli 2025

@floq0r
Ne es geht nur darum, ich möchte quasi nur kurze Teaser mit Link der letzten 3-4 News rotieren. Die Elemente werden immer automatisch aus der DB gefüllt. Da das auf der Startseite laufen soll und ich die Startseite JS clean halten möchte, dachte ich an css und habe da halt diese Methode gefunden.

floq0r · 25. Juli 2025

Ok, du kannst auch für alle Elemente die selbe Animation verwenden und mit animation-delay arbeiten. Alles gut möglich aber nicht leicht zu pflegen wenn es mal Änderungen gibt. Mit JS wäre das einfacher und übersichtlicher.

Guru-Meditation · 25. Juli 2025

floq0r schrieb:
Mit JS wäre das einfacher und übersichtlicher.

Ich weiß, mit dem Haken das diese Sache bei Leute die JS im Browser deaktiviert haben nicht läuft. Das will ich zumindest auf der Startseite vermeiden, darum suchte ich nach Möglichkeiten.

floq0r schrieb:
du kannst auch für alle Elemente die selbe Animation verwenden und mit animation-delay arbeiten

Hast du eventuell ein kleines Beispiel parat? versteh nicht ganz wie du das meinst.

floq0r · 25. Juli 2025

I cerntainly have

!

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Abwechselnde Paragraphen</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .container {
      position: relative;
      width: 300px;
      height: 100px;
    }

    .container p {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      text-align: center;
      opacity: 0;
      animation: fade 9s infinite;
    }

    .container p:nth-child(1) {
      animation-delay: 0s;
    }

    .container p:nth-child(2) {
      animation-delay: 3s;
    }

    .container p:nth-child(3) {
      animation-delay: 6s;
    }

    @keyframes fade {
      0%   { opacity: 0; }
      10%  { opacity: 1; }
      30%  { opacity: 1; }
      40%  { opacity: 0; }
      100% { opacity: 0; }
    }
  </style>
</head>
<body>
  <div class="container">
    <p>Erstes Element</p>
    <p>Zweites Element</p>
    <p>Drittes Element</p>
  </div>
</body>
</html>

Guru-Meditation · 25. Juli 2025

Hey wow 👍so einfach😂 Danke dir..schon erstaunlich was heute mit CSS möglich ist.

K-551 · 25. Juli 2025

Kann dir bei deinem Problem nicht mehr helfen, aber

Guru-Meditation schrieb:
Ich weiß, mit dem Haken das diese Sache bei Leute die JS im Browser deaktiviert haben nicht läuft. Das will ich zumindest auf der Startseite vermeiden, darum suchte ich nach Möglichkeiten.

Danke, ich bin solch einer!
Ich nutze NoScript, nachdem ich mir mal, vor vielen Jahren, Schadsoftware über ein Skript eingefangen habe.

Ich begrüße diese Denkweise und vermisse es im Alltag zunehmens. Vor allem bei den Chinesen und den großen CMS-generierten Seiten wqie Shopify und Co. werden mitunter bis zu 30 Skripts geladen...

Guru-Meditation · 25. Juli 2025

@K-551
Dito, darum will ich immer allen Leute die erste Seite sauber presentieren, dann können die es sich in Ruhe überlegen ob es für sie wert ist und die Seite vertauendwürdig genug ist um JS einzuschalten. Ich hasse selbst diese Seite wo du den eigentlich Content erst gar nicht siehst vor lauter Popups und Bannern..nicht umsonst gibt diese Ad-Blocker mittlerweile wie Sand am Meer.

JS versuche ich immer nur für Konforfunktionen zu benutzen, aber das meiste ist ja dank des immer schnelleren Internets eigentlich eh schon überflüssig. Trotzdem, JS ist schon bei vielen Sachen wichtig und einfach für den Entwickler.

@floq0r
Das rockt, ist nur bisschen kniffelig die richtigen Timings zu finden...das ein/ausbleden ist mir noch nicht weich genug und von element 3 zum 1 zurück, geht es zu schnell...aber ich bekomme das schon irgendwann hin

danke dir für die Zeit.

n/a · 25. Juli 2025

Guru-Meditation schrieb:
mit dem Haken das diese Sache bei Leute die JS im Browser deaktiviert haben nicht läuft

Uff, solche Menschen gibt es auch noch? 🤣

JS gehört mittlerweile immer dazu...

K-551 schrieb:
Vor allem bei den Chinesen und den großen CMS-generierten Seiten wqie Shopify und Co. werden mitunter bis zu 30 Skripts geladen

Mal von den anti-chinesischen Ressentiments abgesehen... weiß jeder andere Online-Shop inzwischen auch genau, welchen Artikel du dir wie lange anschaust und wo die maus ist

netzgestaltung · 25. Juli 2025

ich hab auch viele sachen, die js-frei laufen, ich nehm auch js immer erst falls es wirklich nötig ist...: https://github.com/netzgestaltung/gallery-css-responsive

K-551 · 25. Juli 2025

n/a schrieb:
Mal von den anti-chinesischen Ressentiments abgesehen... weiß jeder andere Online-Shop inzwischen auch genau, welchen Artikel du dir wie lange anschaust und wo die maus ist

Darum gehts mir gar nicht. Mag Paranoid sein, aber ich hab, wie gesagt, schonmal Schadsoftware rein bekommen, über ein Skript. Das sensibilisiert.

Und der Rest hat nix mit Ressentiments gegen chinesische Seiten zu tun, nur da fällt es am meisten auf.
Bsp.:

Amazon: 5 Skripte
Google Startseite sowie Maps: 2
eBay: 4
kleinanzeigen: 7
ardmediathek: 1
Kaufland: 2
spotify: 7
aliexpress: 7
bee-link: 21
minisforum: 20
ugreen 34

Es fällt halt auf, das die meisten Skripte von den Shoplazza- oder Shopify-Shops div. chinesischen Hersteller (nicht alle!) am meisten Skripte laden.
Ich weis auch, das man auch viel mit wenigen Skripten anstellen kann und die Anzahl nix mit dem Inhalt zu tun hat.

Guru-Meditation · 25. Juli 2025

n/a schrieb:
Uff, solche Menschen gibt es auch noch?

Was heißt noch? es werden mittlerweile immer mehr ;-)

n/a schrieb:
JS gehört mittlerweile immer dazu...

Solange etwas im Browser deaktivierbar ist, gehört es nicht wirklich dazu..JS ist eine Zugabe. Ich habe das früher noch so gelernt, niemals wichtige Funktionen mit JS machen da man nie weiß wie der User daher kommt, Benutzerfreundlichkeit first..halte mich noch heute daran.

n/a schrieb:
weiß jeder andere Online-Shop inzwischen auch genau, welchen Artikel du dir wie lange anschaust und wo die maus ist

Mal erlich, das ist doch krank. Die sollten lieber die Produkte qualitativ besser produzieren dann kaufen die Menschen auch, und nicht für billig in China produzieren, hier für überteuert verkaufen, gar kein Support bieten und meinen in 2-3 Jahren Millionär zu sein.

Ergänzung (25. Juli 2025)

Abgesehen, wir sind langsam OT, nicht das uns gleich ein Mod ins Aquarium wirft..ich kann nicht schwimmen

floq0r · 25. Juli 2025

Zum Thema JS deaktivieren: Das hängt davon ab was man vorhat. Für mich und meine Webapps ist das non-negotiable.

n/a · 25. Juli 2025

Ich glaube, in Chrome zum Beispiel ist das auch gar nicht mehr möglich... Ist aber auch nicht so wichtig, wollte nicht vom Thema abkommen

Physikbuddha · 26. Juli 2025

@floq0r Sieht gut aus, aber ich würde vielleicht noch die Animation um display: none zu display: inline und zurück erweitern. Ggf. macht das die Auswahl vom Text mit der Maus leichter, da die Texte dann nicht gestapelt übereinander sind.

Auf der anderen Seite beeinflusst das möglicherweise die Ausgabe von Screenreadern, und ich bin mir nicht zu 100 % sicher …

Rossie · 26. Juli 2025

n/a schrieb:
Ich glaube, in Chrome zum Beispiel ist das auch gar nicht mehr möglich

Doch, diese Einstellung ist auch in Chrome immer noch vorhanden. Würde mich aber nicht wundern, wenn sie irgendwann verschwindet.

Physikbuddha schrieb:
aber ich würde vielleicht noch die Animation um display: none zu display: inline und zurück erweitern

Das kann noch nicht jeder Browser.

floq0r · 26. Juli 2025

Rossie schrieb:
Das kann noch nicht jeder Browser.

Das sollte schon gehen, es führt halt alleine (ohne opacity) nicht zu einem Übergang von sichtbar/nicht sichtbar weil display: none; bedeutet, dass das Element nicht mehr im Layout gepainted wird. Alternativ könnte man noch pointer-events: none; dazunehmen wenn es nur um die Selektion geht.

CSS Per Animation Text einblenden/ausblenden, neuen Text einblenden usw. endlos..

Guru-Meditation

Gast

Captain

Guru-Meditation

Gast

Captain

Guru-Meditation

Gast

Captain

Guru-Meditation

Gast

Captain

Guru-Meditation

Gast

Commander

Guru-Meditation

Gast

Banned

Commodore

Commander

Guru-Meditation

Gast

Captain

Banned

Lt. Commander

Rear Admiral

Captain

Ähnliche Themen