Allgemeines Problem mit `transition`?

[stobi_de]

Mir deucht, wir haben ein neues Problem mit Transition

Code: Alles auswählen

.mydisplay {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 3.5s, opacity 3.5s linear;
}

Gibt diese Klasse mal irgendeinem Block oder was auch immer ganz oben auf einer Seite ein.
So rein theoretisch müsste der Block langsam ausgeblendet werden.
Aber er ist einfach weg.
Diesen Effekt habe ich seit einiger Zeit bemerkt, aber an einen eigenen Fehler gedacht. Aber nein, auch in einem ganz nackten Mobi-Template.

Und ganz vergessen: GUTEN MORGEN !

[Tommy Herrmann]

Moin,

hmm - nun weiß ich nicht genau was Du erreichen willst, aber wenn Du es auf "hidden" stellst, denke ich mal, dann ist es eben auch weg

Ich würde das eher so machen:

gelöscht/Vorlageseite/index.html#hover

(Seite wird später wieder gelöscht)

Code: Alles auswählen

.mydisplay {
  transition: visibility 0s 3.5s, opacity 3.5s linear;
}
.mydisplay:hover {
  opacity: 0;
  cursor: pointer;
}

Das kommt mir aber auch noch falsch vor (frage mal ChatGPT).

Übrigens `visibility` kann nicht weich animiert werden (wie opacity), sondern nur sprunghaft (sichtbar / unsichtbar).

[stobi_de]

Ich will damit eines machen: testen, ob transition funktioniert.
Natürlich sinnlos in dem Zusammenhang..

[Tommy Herrmann]

Ja - natürlich - das ganz normale CSS `transition` funktioniert einwandfrei in Mobirise.

https://www.w3schools.com/css/css3_transitions.asp

[Tommy Herrmann]

Das habe ich ja schon seit Jahren auch an allen möglichen Stellen im Einsatz, zum Beispiel auch an diesem Audio-Player:

https://www.mobirise-tutorials.com/MP3- ... #Audio-Tag

Code: Alles auswählen

/* Tommys audio CSS */
audio {
 width: 300px;
 max-width: 90%;
 height: 30px;
 display: block;
 transition:all 0.5s linear;
 box-shadow: 2px 2px 4px 0px #006773;
 border-radius: 30px;
}

/* color player at Edge and Chrome */
audio::-webkit-media-controls-panel {
 background-color: lightblue;
}

/* color player at Firefox (takes blue only) */
audio{
 background-color: blue;
 opacity: 0.8;
}

/* animation of player */
audio:hover, audio:focus, audio:active {
 box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.4);
 transform: scale(1.05);
} 

[stobi_de]

Dann habe ich irgendwo was falsch.
Und heute morgen geht es in meinem Test-Projekt. Keine Änderung gemacht, nicht an Mobi und nicht am Projekt.

[Tommy Herrmann]

Moin,

manchmal schreibt man ja auch versehentlich einen Fehler in die CSS Anweisungen.

Ich habe ziemliche viele Beispiele auf meinen Tutorialseiten mit `tansition`, kannst ja mal bei meiner "Suche" eingeben:

transition

https://www.mobirise-tutorials.com/Suchen.php

Vielleicht gibt das noch Hinweise oder Ideen.

[stobi_de]

Du, ich benutze das Ding ja auch ständig.
Daher ja meine erste Vermutung, dass es nicht an mir, sondern an Mobi liegt