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

[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