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

Hallo ist es möglich eine 2. Transition nach z.b. 10 Sekunden aufzurufen?

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

Lucnardo

Beitragsersteller

18.10.2021, 13:09

Danke hat geklappt!

MrAmazing2

18.10.2021, 13:11

@Lucnardo

Bitte ^^

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);

}

FaTech

18.10.2021, 13:04

@Lucnardo

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

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

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.

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.

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.

FaTech

18.10.2021, 13:05

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

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.

RedHolzbein

18.10.2021, 13:06

Du kannst mit transition-delay: die Verzögerung einer Transition einstellen.

Woher ich das weiß:Hobby

Ähnliche Beiträge

HTML CSS - Button soll 10 Sekunden nach dem Klick ausgeführt werden?

Hallo,

sobald mein Button ( HTML / CSS / (JS) ) gedrückt wird, soll stehen: "Bitte warte noch 10 Sekunden". Nach den Sekunden soll der Button ausgeführt werden.

Wie geschieht das?

...zum Beitrag

CSS, mehrere Transitions?

Hallo, wie kann ich, wenn ich einen Button habe, auf dem ich die Opacity in der Pseudoklasse Hover in einer Transition von 2ms ändern möchte, die Opacity von der Pseudoklasse Active in einer anderen Transitionzeit ändern? Wenn ich transition: opacity 2ms schreibe, wird das sowohl für hover als auch active angewendet, aber ich möchte jeweils unterschiedliche Transitionzeiten haben. Also auf active z.B. 1ms. Ich kann die Transition auch nicht in die jeweilige Pseudoklasse schreiben, da die Transition aufhört, sobald man beispielsweise vom Button runterhovert.

...zum Beitrag

HTML/CSS Bild passt sich nicht automatisch an?

Hallo,

ich bin dabei HTML und CSS zu lernen. Kann mir jemand sagen, warum sich das Bild nicht automatisch der Browsergröße anpasst? Anbei mein Code.

...zum Beitrag

Html, CSS und JS Liste?

Guten Tag,

Wir müssen eine Einkaufsliste mit HTML, CSS und JS machen. Es soll in einer Liste aufgezählt werden, wenn man auf Hinzufügen drückt. Man soll es links eingeben können und das was man dort schreibt wird dann aufgelistet. Sobald man Hinzufügen gedrückt hat soll das Feld auf der linken Seite wieder geleert werden.

<ul >
 <li></li>
 <li></li>
</ul>

Es wäre top, wenn mir jemand helfen könnte :)

...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

CSS 3D-Würfel: Wie kann ich die Rückseite so wie die anderen Würfelseiten bewegen lassen?

Ich habe einen 3D-Würfel per CSS erstellt und würde ihm nun gerne eine 3D-Animation beim Hovern verleihen.

An sich komme ich auf das richtige Ergebnis, aber irgendwie verstehe ich die Rotation der Rückseite nicht und würde gerne wissen, wie ich sie so wie die anderen Würfelseiten bewegen lasse und nicht über diese komische Seitwärtsbewegung. Beziehungsweise ich möchte wissen, weswegen es bei rotateX überhaupt eine Seitwärtsbewegung durchführt.

Hier der Code:

HTML:

<div class="scene">
  <div class="cube">
    <div class="cube__face cube__face--front"></div>
    <div class="cube__face cube__face--back">back</div>
    <div class="cube__face cube__face--right">right</div>
    <div class="cube__face cube__face--left">left</div>
    <div class="cube__face cube__face--top">top</div>
    <div class="cube__face cube__face--bottom">bottom</div>
  </div>
</div>

CSS:

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 80px;
  perspective: 400px;
  transition-duration: 1s
}

.cube {
  transition-duration: 1s;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
}

.scene:hover .cube {
  transform: translateZ(-10px);
}

.cube__face {
  ;
  border: 3px solid black;
  position: absolute;
  width: 200px;
  height: 200px;
  color: white;
  font-size: 2.5em;
  transform: scale(2.5);
  text-align: center;
  font-weight: bold;
  line-height: 200px;
  transform: perspective(500px) translateZ(250px)
}

.cube__face--front {
  transition-duration: 1s;
  transform: rotateY(0deg) translateZ(100px);
  background: url(Gesichr.png) hsla(214, 100%, 46%, 0.7);
  opacity: 0.5;
  background-size: cover;
}

.cube__face--right {
  transition-duration: 1s;
  transform: rotateY(90deg) translateZ(100px);
  background: hsla(99, 100%, 36%, 0.7);
}

.cube__face--back {
  transition-duration: 1s;
  transform: rotateY(180deg) translateZ(100px);
  background: hsla(63, 99%, 59%,0.7)
}

.cube__face--left {
  transition-duration: 1s;
  transform: rotateY(-90deg) translateZ(100px);
  background: hsla(10, 100%, 50%, 0.7)
}

.cube__face--top {
  transition-duration: 1s;
  transform: rotateX(90deg) translateZ(100px);
  background: hsla(181, 100%, 67%,0.8)
}

.cube__face--bottom {
  transition-duration: 1s;
  transform: rotateX(-90deg) translateZ(100px);
  background: hsla(38, 100%, 52%,0.7)
}

.scene:hover .cube__face--front {
  transform: rotatex(-30deg) translateZ(100px);
}

.scene:hover .cube__face--right {
  transform: rotateY(90deg) translateZ(100px) rotatez(-30deg);
}

.scene:hover .cube__face--back  {
  transform: rotateY(0deg) rotateX(150deg) translateZ(100px) rotate(-180deg);
}

.scene:hover .cube__face--left {
  transform: rotateY(-90deg) translateZ(100px) rotatez(30deg);
}

.scene:hover .cube__face--top  {
  transform: rotateX(60deg) translateZ(100px);
}

.scene:hover .cube__face--bottom {
  transform: rotateX(-120deg) translateZ(100px);
}

...zum Beitrag

Website vergrößern Html/ Css?

Hallo alle zusammen,

Ich habe eine Website am Laptop mit HTML und CSS programmiert, aber wenn ich das auf dem PC öffnen möchte dann ist das Format kleiner und damit es passt muss ich die Website um 175% vergrößern im browser...

Kann ich das in HTML und CSS irgendwie reinschreiben, dass sich die seite immer automatisch in der größe ist und wenn ja wie?

Danke für eure hilfe

...zum Beitrag

Wie lange um HTML zu lernen?

Und ist CSS genauso leicht?

...zum Beitrag

Wordpress Seite als eine HTML, CSS und JS Datei exportieren?

Hallo,

ich möchte eine Wordpress-Website statisch wie sie zu sehen ist als HTML, CSS und JavaScript Dateien exportieren. Leider funktioniert dies nicht wie ich es möchte, da alle JavaScript Funktionen für z.B. ausklappbare Menüs in einzelnen JS Dateien liegen. Auch das CSS ist teilweise in der entsprechenden Datei, teilweise aber auch im HTML Code, das ist aber nebensächlich.

Gibt es irgendein Tool - egal ob Online mit GUI oder als Shell Anwendung, dass es mir ermöglicht, die Seite wie von mir beschrieben als Einzeldateien herunterzuladen?
Die Seite läuft nicht über meinen eigenen WP Account, ich kann also keine WP Plugins installieren...

LG und vielen Dank

Andy

...zum Beitrag

HTML und CSS Imagetag Unterschiede?

Warum nutze ich im HTML img Tag "src" und im CSS "url"?

Also die technischen Unterschiede verstehe ich, aber warum kann ich im CSS nicht mit SRC arbeiten, wo meine Bilddatei doch im Webspace liegt?

...zum Beitrag

Wie kann man den Header immer beim runter scrollen sehen, css + html?

...zum Beitrag

Gute KI um HTML-, CSS- und JS-Code für eine Webseite zu erstellen?

Hallo kennt jemand eine gute KI, um HTML-, CSS- und JavaScript-Code für eine Webseite zu erstellen?

...zum Beitrag

HTML schreiben und danach CSS anwenden oder den Code schreiben und sofort mit CSS stylen?

In Bezug auf eine responsive site zum Beispiel.

...zum Beitrag

Externe CSS Datei vor Inline CSS in HTML Datei bevorzugen?

Kann ich es irgendwie erzwingen, dass externe CSS Konfigurationen vor dem inline Code in der HTML Datei verwendet werden? Jede CSS Einstellung, die ich in einer externen CSS-Datei erstell, wird, wenn im HTML Code die selbe Einstellung nochmal vorhanden ist, von der internen überschrieben.

Beispiel:

Externes CSS:                                              Internes CSS:
z-index:1;                                                 z-index:2;

Im Browser wird der z-index 2 gezogen.

Danke für hilfreiche Antworten!

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen