Ich bin mir nicht sicher, was genau du fragst, aber ich denke, du sagst, dass der Übergang nur bei einer Maus auftritt und nicht wenn du mit der Maus rauskommst (es springt einfach zurück auf die Art, wie es vorher war) , anstatt überzugehen). Sie müssen Ihre Übergangseigenschaft zu #in anstatt zu #in:hover hinzufügen. Der Übergang findet nur statt, wenn das Element " #in " verschoben wird. Bewege die CSS für den Übergang unter #in und es funktioniert mit Mouse Over und Mouse Out. Sie möchten die gewünschte css für den Hover-Status unter #in:hover belassen, in diesem Fall die Änderung der Deckkraft, aber die Eigenschaft des tatsächlichen Übergangscss wird unter #in liegen.
Um es ein wenig klarer zu machen:
%Vor%Es ist wichtig zu wissen, dass "easy-in-out" nichts mit dem Übergang zu tun hat. Es mag auf diese Art und Weise scheinen, dass die Leichtigkeit im Schweben ist und die Leichtigkeit im Mouseout ist, aber eigentlich bedeutet Leichtigkeit, dass sie langsam ein- und ausschwingt, anstatt so etwas wie Erleichterung, was erleichtert in den Übergang langsam und dann beschleunigt gegen Ende. Es bezieht sich auf den Stil des Übergangs selbst und nicht darauf, wann er auftritt.
Vielleicht hast du das schon verstanden, aber basierend auf deiner Frage scheint es, dass du dort verwirrt warst.
Ich fand, dass die Antwort von @wellbornio für mich funktionierte, jedoch funktionierte die Ease-in-Out-Funktion zunächst nicht perfekt. Bei Anwendung auf den 'img' funktionierte der Ease-Effekt nur intermittierend. Ich fand, dass, damit der Effekt jedes Mal funktioniert, ich die Ease-In auf den "img" und die Leichtigkeit auf den "hover" anwenden musste. Ich bin mir nicht sicher, warum das passiert ist, aber das ist eine Lösung, wenn jemand in das gleiche Problem läuft.
Tags und Links transition