HTML/CSS Transition nach 10 Sekunden eine 2. Transition ausführen?

4 Antworten

Von Experte BeamerBen bestätigt
MrAmazing2
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, programmieren
18.10.2021, 13:08

Ja, ist es:

animation: animation1 1s forwards, animation2 1s 10s forwards;

Man kann bei animation mehrere Animationen auflisten. Ausserdem kann man für jede dieser Animationen eine bestimmte Verzögerung einstellen. Die erste Sekunden-Anzahl ist die Dauer, die zweite (falls vorhanden) die Verzögerung. Für die zweite Animation hier eine Verzögerung von 10 Sekunden, dick markiert.
Woher ich das weiß:Hobby – Programmieren ist mein Hobby & Beruf
BeamerBen  18.10.2021, 13:27

Sollte jemals jemand auf diese Frage über die Suchfunktion kommen hier wäre noch die Doku zu der animation shorthand property. Die Antwort ist völlig korrekt, einfach mehrere Animationen angeben mit einem start delay, bei der animation shorthand property einfach Komma separiert.

https://developer.mozilla.org/en-US/docs/Web/CSS/animation

1
FaTech
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, programmieren
18.10.2021, 13:02

Du könntest das mit CSS Animate und Keyframes lösen. Dort kannst du dann sagen, wie lange was dauern soll und kannst 2 oder mehr transitions haben
Lucnardo 
Beitragsersteller
 18.10.2021, 13:03

mit Keyframes habe ich die erste schon gemacht  
@keyframes slideIn {

    0% {

      transform: translateY(-100%);

    }

    100% {

      opacity: 1;

      transform: translateY(0);

    }

  }

0
FaTech  18.10.2021, 13:04
@Lucnardo

Aber das transition fehlt? Du kannst in den keyframes auch ganz normal transition: ...; benutzen

0
Mauritan
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer
18.10.2021, 13:03
Was eine Transition ist, weiß ich leider nicht.

Doch so gut wie alle Programmiersprachen kennen einen Befehl "sleep" (Syntax bitte nachschlagen). PHP sollte auch etwas in der Art haben.

Was willst Du denn machen?
Woher ich das weiß:Berufserfahrung – ich arbeite schon sehr lange im EDV Bereich, viele Sparten
FaTech  18.10.2021, 13:05

CSS ist nicht PHP. CSS hat transition-delay Theoretisch, geht aber in der Kombination nicht so gut

0
Mauritan  18.10.2021, 13:07
@FaTech

Ich baue einige meiner Seiten mit PHP auf und mache einige spannende Dinge damit. Mit Laden von Formatierungen und Seiten.

0
BeamerBen  18.10.2021, 13:21

Warum antwortest du denn wenn du nicht weißt was das ist? Steht ja in der Überschrift das es um CSS geht.

0
Mauritan  18.10.2021, 13:23
@BeamerBen

Ich weiß sehr gut, was CSS ist. Wenn Du nicht weiß, wie Du CSS mittels PHP in eine Seite einbinden kannst, bist eher Du es, der etwas nicht weißt.

0
BeamerBen  18.10.2021, 13:24
@Mauritan

CSS Animationen laufen im Browser, wie willst du da mit PHP *mitten in der Animation* ein Delay einfügen? Was für ein nonsense. Das hat absolut nichts mit irgendeiner Backend Sprache zu tun.

0
RedHolzbein
18.10.2021, 13:06

Du kannst mit transition-delay: die Verzögerung einer Transition einstellen.
Woher ich das weiß:Hobby