CSS Transition / Animation: Blend-Mode weich verändern

[Killua]

Wie kann man beim Hover (z.B: eines Logos) von einem mix-blend-mode weich zu einem anderen mix-blend-mode übergehen?

Folgenes funkt bez. Größe und Transparenz wie es soll - als weicher Übergang:

.headerlogo {
   width: 40%; height: auto;
   filter: opacity(0.5);
   mix-blend-mode: normal;
   transition:
      width 5s cubic-bezier(0.65, 0.05, 0.36, 1) 0s,
      filter 0.5s ease-in-out 0s,
      mix-blend-mode 0.5s ease-in-out 0s;
}
.headerlogo:hover { 
   width: 50%; 
   filter: opacity(1); 
   mix-blend-mode: hard-light;}

Was hier nicht weich übergeht, ist der Blend-Mode, der ändert sich sofort.

Was mache ich falsch?

[Gunnar Bittersmann]

@@Killua

Was mache ich falsch?

Du hast kein Online-Beispiel verlinkt.

Kwakoni Yiquan

[Killua]

Du hast kein Online-Beispiel verlinkt.

Das ist am XAMPP - oder was meinst mit Beispiel?

[Gunnar Bittersmann]

@@Killua

Das ist am XAMPP - oder was meinst mit Beispiel?

Eine Stelle, wo man sich das ansehen kann. Deine Seite oder das nachgestellt auf CodePen, Dabblet o.ä.

Kwakoni Yiquan

[Killua]

Sorry, wie gesagt, das ist am XAMPP, also kann ich die Seite nicht herzeigen. Und mit Codepen oder so Portalen kenne ich mich nicht aus, will mich auch gar nicht dort registrieren oder was auch immer.

Denke aber, man kann Blend Mod nicht animieren - denn in der Liste ist es nicht: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/animierbare_Eigenschaften

Jo, mei. Kann man nix machen.

[Rolf B]

Hallo Killua,

Keyword-Eigenschaften sind prinzipiell nicht animierbar. Wie willst du einen fließenden Übergang von foo nach bar erstellen?

Rolf

[Killua]

Verstehe ... eigentlich logisch. War aber einen Versuch wert. Danke

[MudGuard]

Hi,

Keyword-Eigenschaften sind prinzipiell nicht animierbar. Wie willst du einen fließenden Übergang von foo nach bar erstellen?

foo → boo → bao → bar

oder

foo → for → far → bar

Ok, ist nicht fließend - aber auch numerische Werte sind im Computer ja nicht fließend zu ändern …

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

jaaa, klar doch.

Problem ist nur: wenn foo und bar gültige CSS Keywords sind, dann sind es boo, bao, for und far mutmaßlich nicht.

Von normal → hard-light ganz zu schweigen…

Um einen weichen Übergang zwischen "normal" und "hard-light" zu schaffen, würde ich vermutlich beide Übergänge realisieren, in zwei div- Gruppen übereinanderlegen und die Opacity dieser beiden Gruppen animieren. Die eine von 0 nach 1, die andere von 1 nach 0.

Kann 🤮 aussehen, müsste man ausprobieren.

Vielleicht kann man auch das Hintergrundbild nur 1x haben. Das Vordergrundbild legt man 2x drüber, eins mit blend-mode normal und opacity:1, eins mit hard-light und opacity:0, und dann animiert man die Opacities. Oder auch die Omacities, der Gendergerechtigkeit wegen.

So, jetzt habe ich wenigstens einen konstruktiven Versuch gemacht, statt nur "Nä, geht nich" zu sagen.

Rolf

[Killua]

Omacities

🤣³

[MudGuard]

Hi,

Problem ist nur: wenn foo und bar gültige CSS Keywords sind, dann sind es boo, bao, for und far mutmaßlich nicht.

ach so? Wirklich? Ich hätte nicht nur implizite Smileys tippen sollen …

Oder auch die Omacities, der Gendergerechtigkeit wegen.

Das sind doch die Städte im US-Bundesstaat Oklahopa, oder?

cu,
Andreas a/k/a MudGuard

[Killua]

Oder auch die Omacities, der Gendergerechtigkeit wegen. Das sind doch die Städte im US-Bundesstaat Oklahopa, oder?

Yes. Well, Biden gabs sogar mal einen Mr. Opama!

[Gunnar Bittersmann]

@@Killua

Und mit Codepen oder so Portalen kenne ich mich nicht aus, will mich auch gar nicht dort registrieren oder was auch immer.

Wenn du nicht willens bist, ein Online-Beispiel bereitzustellen, kann man dir kaum weiterhelfen. Oder in deinen Worten: Jo, mei. Kann man nix machen.

Schade eingentlich. Mich hätte schon interessiert, was du für ein Logo und was für einen Hintergrund hast, dass du da mix-blend-mode einsetzt.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

und mich würde interessieren, ob meine Idee mit den Omacities Erfolg versprochen hätte. Hier in der Urlaubspampa kann ich dazu nix ausprobieren.

Rolf

[Killua]

kann man dir kaum weiterhelfen

Ihr habt mir insofern geholfen, in dem ich nun realisierte, dass man den Blend Modus eben nicht animieren kann. Was eh auch mittels der List der animierbaren Eigenschaften zu erfahren gewesen wäre.

Mich hätte schon interessiert, was du für ein Logo und was für einen Hintergrund hast, dass du da mix-blend-mode einsetzt.

Es war ja auch nur so eine Idee: Vor dem Hintergrund eines Hero-Headers, der u.a. eine Landschaft zeigt, schwebt ein Papagei. Beim Mausover sollte der von einem relativ unscheinbaren, fast transparenten SW Modus in die volle Farbe überblenden. Nix wichtiges eben, nur so eine Idee.

Der Übergang von einer Opacity in die andere schaut auch gut aus.

---

Wenn du nicht willens bist, ein Online-Beispiel bereitzustellen

Bez. dieser Portale, wie spezieller Coder Foren usw. denke ich, das sollte euch prof. Webworkern vorbehalten sein.

Ich kenne CodePen ein bissl von außen, schaue dort alle paar Jahre mal rein, wenn mir Google das bei einer Suche nach einem bestimmten Effekt oder Funktion zeigt. Dann denke ich: wow! Da siehtste, wo du stehst und wo die sind. Da fände ich so primitive Versuche eines Laien fehl am Platze.

Ja und da sich das hohe Niveau solcher stets fremdsprachiger Plattformen auch durch das allgemeine Handling zieht, tue ich mir dort keine Registrierung an. Vllt. ist CodePen da eh pflegeleichter, aber wegen eines CSS 2-Zeilers: Ne.

Aber sollte jemand ein derartiges DE-sprachiges Angebot kennen, wo auch Laien mitspielen können - dann bitte.

[Der Martin]

Moin,

Es war ja auch nur so eine Idee:
Vor dem Hintergrund eines Hero-Headers, der u.a. eine Landschaft zeigt, schwebt ein Papagei. Beim Mausover sollte der von einem relativ unscheinbaren, fast transparenten SW Modus in die volle Farbe überblenden.
Nix wichtiges eben, nur so eine Idee.

also doch ein klarer Fall für opacity.

Der Übergang von einer Opacity in die andere schaut auch gut aus.

Na bitte. 🤭

Wenn du nicht willens bist, ein Online-Beispiel bereitzustellen

Bez. dieser Portale, wie spezieller Coder Foren usw. denke ich, das sollte euch prof. Webworkern vorbehalten sein.

Sehe ich genau andersrum: Das sind Portale, auf denen man mal schnell ein Minimalbeispiel mit ein paar Zeilen Code zurechtzimmern und vorzeigen kann. Also ideal geeignet für Amateure.

Profis hätten in der Regel einen eigenen Server oder zumindest eigenen Webspace, auf dem sie solche Beispiele veröffentlichen können.

Dann denke ich: wow! Da siehtste, wo du stehst und wo die sind.
Da fände ich so primitive Versuche eines Laien fehl am Platze.

Es geht bei Plattformen wie etwa CodePen nicht um Komplexität oder Raffinesse. Sondern darum, ohne umfangreiche Voraussetzungen mal schnell ein Codebeispiel einschließlich "und so sieht's dann aus" zu zeigen.

Ja und da sich das hohe Niveau solcher stets fremdsprachiger Plattformen auch durch das allgemeine Handling zieht, tue ich mir dort keine Registrierung an.

Hmm. Aber hier im Forum hast du dich angemeldet, obwohl es nicht erforderlich ist. 🤔

Ganz ehrlich: Ich mag es auch nicht, wenn ich mich bei unzähligen Online-Plattformen anmelden soll - und wenn ich nicht den Eindruck habe, es ist unbedingt erforderlich, dann such ich mir halt eine Alternative oder lass es bleiben.

Trotzdem: Wer hier im Forum Hilfe sucht, sollte es den potentiellen Helfern bitte nicht unnötig erschweren. Niemand hat Lust, Quellcode erst zu kopieren und dann in einer eigenen Testumgebung auszuprobieren.

Einen schönen Tag noch
 Martin

[Killua]

also doch ein klarer Fall für opacity.

Ne, weil SW zu Farbe ist damit nicht möglich

ohne umfangreiche Voraussetzungen mal schnell ein Codebeispiel einschließlich "und so sieht's dann aus" zu zeigen.

Ok, verstehe

Wer hier im Forum Hilfe sucht, sollte es den potentiellen Helfern bitte nicht unnötig erschweren.

Das wollte ich nicht.

[Matthias Scharwies]

Servus!

also doch ein klarer Fall für opacity.

Ne, weil SW zu Farbe ist damit nicht möglich

SVG/Tutorials/Filter/Anwendung_in_CSS#Graustufen

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

oookay - wenn's nur um Grayscale und Transparenz geht, dann ist das eine sehr einfache Lösung.

Hier meine Rehe damit

Rolf

[Auge]

Hallo

Bez. dieser Portale, wie spezieller Coder Foren usw. denke ich, das sollte euch prof. Webworkern vorbehalten sein.

Ich kenne CodePen ein bissl von außen, schaue dort alle paar Jahre mal rein, wenn mir Google das bei einer Suche nach einem bestimmten Effekt oder Funktion zeigt.
Dann denke ich: wow! Da siehtste, wo du stehst und wo die sind.
Da fände ich so primitive Versuche eines Laien fehl am Platze.

Da sitzt du durch deine Erfahrungen einem Fehlschluss auf. Du siehst, „alle paar Jahre“ etwas nachschauend, nur die Codebeispiele, die bestenfalls eine Problemlösung anbieten oder dir zumindest auf den Weg helfen. Du siehst aber nicht die hunderttausenden Problembeschreibungen, die sagen „Schaut mal, bis hier bin ich gekommen, aber es funktioniert nicht. Was ist daran falsch?“. Da gibt es jegliches Niveau, vom interessierten Laien, der etwas ausprobieren will, bis zum Vollprofi, der an einem überaus kniffligen Problem arbeitet und hintendran im besten Fall die superduper Lösung präsentiert.

Tschö, Auge

[Killua]

Du siehst aber nicht die hunderttausenden Problembeschreibungen

Eben … Das kann man sicher in einem Forum besser herausarbeiten

[Auge]

Hallo

Du siehst aber nicht die hunderttausenden Problembeschreibungen

Eben … Das kann man sicher in einem Forum besser herausarbeiten

Ja, aber man sollte seine Problembeschreibung bestmöglich stützen. Und das ist nun einmal mit einem Beispiel bei einem dieser Dienste sehr gut machbar.

Tschö, Auge

[Gunnar Bittersmann]

@@Killua

Mich hätte schon interessiert, was du für ein Logo und was für einen Hintergrund hast, dass du da mix-blend-mode einsetzt.

Vor dem Hintergrund eines Hero-Headers, der u.a. eine Landschaft zeigt, schwebt ein Papagei. Beim Mausover sollte der von einem relativ unscheinbaren, fast transparenten SW Modus in die volle Farbe überblenden.

Ich hab ein Beispiel erstellt, wo sich beim Hovern nur mix-blend-mode ändert. Der Effekt ist kaum zu sehen, man muss schon genau hinschauen, um ihn wahrzunehmen. Was hast du da, dass das bei dir anders ist?

---

Bez. dieser Portale, wie spezieller Coder Foren usw. denke ich, das sollte euch prof. Webworkern vorbehalten sein.

Äh nö, wieso das denn?

Dann denke ich: wow! Da siehtste, wo du stehst und wo die sind. Da fände ich so primitive Versuche eines Laien fehl am Platze.

Nö, sind sie nicht. Es gibt sicher einige wenige, CodePen als Portfolio verwenden und dort heißen Scheiß präsentieren. Aber ich denke, das ist eine verschwindend kleine Minderheit. Für die meisten dient das als Spielwiese, um was auszuprobieren oder um anderen etwas zu zeigen. Das kann auch was Primitives sein, so wie bei mir kürzlich, wo ich einfach nur einen Punkt gemacht habe.

Also der Punkt ist: Du musst dich überhaupt nicht schämen, dort einfache Beispiele zu veröffentlichen.

Ja und da sich das hohe Niveau solcher stets fremdsprachiger Plattformen

?? Hättest du die paar Buttons im UI dort gern übersetzt? Oder geht’s dir um die Inhalte in Beispielen? Die sind in meinen auch desöfteren auf deutsch. Oft die Allgemeine Erklärung der Menschenrechte; der Text macht mehr Sinn als „Lorem ipsum“.

Kwakoni Yiquan

[Killua]

Was hast du da, dass das bei dir anders ist?

Das schnelle umschalten ist ja easy möglich, nicht aber ein weiches Überblenden.

Hättest du die paar Buttons im UI dort gern übersetzt? Oder geht’s dir um die Inhalte in Beispielen?

Ne, ich mag allgemein keine fremdsprachigen Angebote. Egal was ich suche, ob Informationen, Leistungen oder Produkte egal welcher Art und Branche: Bevorzugt ist, wenn ein Angebot in DE ist.

Nur wenns echt nicht anders geht, hole ich mir z.B. auch mal Software von einem fremdsprachigen Anbieter (wenn nichts aus unserem Sprachraum rankommt) oder kaufe Autoteile für meinen Land-Rover bei britischen Websites (weil gleiche Marke ums 10-fache billiger) usw. Aber das sind seltene Ausnahmen.

Bez. CodePen: Vllt. schaue ich mir das mal näher an, evtl. ist es eh einfach zu handhaben.

[Gunnar Bittersmann]

@@Killua

.headerlogo {
   width: 40%; height: auto;
   filter: opacity(0.5);
   mix-blend-mode: normal;
   transition:
      width 5s cubic-bezier(0.65, 0.05, 0.36, 1) 0s,
      filter 0.5s ease-in-out 0s,
      mix-blend-mode 0.5s ease-in-out 0s;
}
.headerlogo:hover { 
   width: 50%; 
   filter: opacity(1); 
   mix-blend-mode: hard-light;}

Was mache ich falsch?

Du animierst width. Das sollte man aus Performanz-Gründen nicht tun. [MDN]

Verwende scale, wenn der zweifelhafte Effekt denn unbedingt sein muss.

Warum verwendest du eigentlich filter: opacity(0.5) und nicht opacity: 0.5?

Kwakoni Yiquan

[Killua]

Du animierst width. Das sollte man aus Perfomanz-Gründen nicht tun.

Verwende scale, wenn der zweifelhafte Effekt denn unbedingt sein muss.

Warum verwendest du eigentlich filter: opacity(0.5) und nicht opacity: 0.5?

Das waren alles nur Beispiele, Netzfunde die ich irgendwo noch herumliegen hatte. Eigentlich wollte ich nur den Blend Mode langsam, weich umschalten und um zu testen, ob was anderes am Code nicht stimmt, habe ich diese zwei einfachen, stets funktionierenden Sachen mit hineingenommen.

Weiß auch nicht mehr, warum da filter steht. Normal mache ich auch opacity: 0.5

Danke für sie Hinweise.

Kwakoni Yiquan

[Rolf B]

Hallo Killua,

bin aus dem Urlaub zurück und habe mal gespielt. Ich denke, Du möchtest (mit anderen Blendmodi) sowas:

Pseudo-Animation von Keyword-Eigenschaften

Es sind 3 Bilder:

1. Wald als Hintergrund
2. Rehe "regular" mit mix-blend-mode 1 und opacity 1
3. Rehe "hover" mit mix-blend-mode 2 und opacity 0

Die "regular"-Rehe sind mit z-index im Vordergrund, damit sie den :hover-Status bekommen können. Wenn das passiert, wird ihre Opacity auf 0 gesetzt. Da die "hover"-Rehe im DOM nachfolgen, kann ich den Geschwister-Kombinator verwenden, um den :hover der "regular"-Rehe in eine opacity:1 der "hover" Rehe umzusetzen.

Man kann das auch ohne z-index machen, dann kommt der :hover aber zu den "hover"-Rehen und man muss bei den "regular"-Rehen :has() verwenden, um zu erkennen, ob das nachfolgende Geschwisterelement gehovert wird.

Per transition-Angaben für die gemeinsame does-Klasse habe ich dann noch festgelegt, dass die opacity in 1s überblendet wird.

Und natürlich habe ich auch die Tastaturler bedacht und verarbeite :hover und :focus gleich.

Rolf