Ease-in-out을 사용한 CSS 전환이 마우스 오버 시에는 원활하게 작동하지만 마우스 아웃 시 갑자기 작동하는 이유는 무엇입니까?

CSS 전환 Ease-In Ease-Out 난제

all 속성과 easy-in- 속성을 사용하여 요소에 전환을 적용할 때 예제 바이올린(http://jsfiddle.net/garethweaver/Y4Buy/1/)에서 볼 수 있듯이 여유 기능을 사용하면 요소 위로 마우스를 가져갈 때 요소가 부드럽게 전환됩니다. 그러나 마우스를 떼면 갑자기 다시 돌아옵니다. 왜 이런 일이 발생하고 어떻게 해결하는지에 대한 의문이 생깁니다.

해결책은 전환 속성에 대한 :hover 가상 클래스가 아닌 기본 요소를 대상으로 하는 것입니다. 요소 자체에 전환을 정의하면 호버 상태에 들어갈 때와 나갈 때 모두 적용됩니다.

업데이트된 예

수정된 CSS 코드:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  -moz-filter: blur(4px);
  -webkit-filter: blur(4px);
  filter: blur(4px);
}</code>

이 수정을 통해 이제 이미지가 양방향으로 부드럽게 전환되어 마우스를 올리면 부드럽게 들어오고 마우스가 이미지 영역을 벗어날 때는 부드럽게 전환됩니다.

위 내용은 Ease-in-out을 사용한 CSS 전환이 마우스 오버 시에는 원활하게 작동하지만 마우스 아웃 시 갑자기 작동하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!