호버에서 CSS `display` 및 `opacity` 속성을 원활하게 전환하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

호버에서 CSS `display` 및 `opacity` 속성을 원활하게 전환하는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-10-30 06:16:27

원래의

938명이 탐색했습니다.

How to Seamlessly Transition CSS `display` and `opacity` Properties on Hover?

CSS 표시 및 불투명도 속성을 원활하게 전환

CSS3 애니메이션 영역에서는 여러 속성, 특히 표시 및 불투명도를 전환하려고 할 때 문제가 발생합니다. 강조하신 바와 같이 마우스 오버 시 디스플레이 속성이 수정되면 불투명도의 원활한 전환이 방해됩니다.

이 딜레마를 해결하기 위해 창의적인 솔루션이 고안되었습니다. @keyframes 규칙을 활용하여 기본적으로 표시 속성 전환 모양을 모방하는 사용자 정의 애니메이션을 정의합니다. 요령은 요소의 불투명도를 제어하면서 "display: none"에서 "display: block"으로 우아하게 전환하는 것입니다.

Michael이 제시한 수정된 CSS 코드는 우아한 솔루션 역할을 합니다.

<code class="css">.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}</code>

로그인 후 복사

이 코드에서 @keyframes 규칙은 요소의 불투명도를 0에서 1로 전환하는 동시에 표시 속성을 "none"에서 "block"으로 설정하는 명명된 애니메이션 "fadeInFromNone"을 정의합니다. 타이밍 및 이징 기능은 원하는 대로 조정할 수 있습니다.

이 솔루션을 구현하면 표시 및 불투명도 속성을 쉽게 전환하여 마우스 오버 시 부드럽고 시각적으로 매력적인 효과를 보장할 수 있습니다.

위 내용은 호버에서 CSS `display` 및 `opacity` 속성을 원활하게 전환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!