CSS 디스플레이를 갑자기 변경하는 동안 부드러운 불투명도 전환을 달성하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS 디스플레이를 갑자기 변경하는 동안 부드러운 불투명도 전환을 달성하는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-11-01 00:31:28

원래의

887명이 탐색했습니다.

How to Achieve Smooth Opacity Transitions While Abruptly Changing CSS Display?

CSS 디스플레이 및 불투명도 속성에 대한 부드러운 전환 생성

디스플레이 및 불투명도에 애니메이션을 적용하려고 할 때 문제가 발생했습니다. 요소의 속성을 변경했지만 표시 변경이 전환을 방해합니다. 디스플레이 속성이 갑자기 변경되는 동안 불투명도가 부드럽게 전환되는 원하는 결과를 얻으려면 다음 솔루션을 활용할 수 있습니다.

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>

로그인 후 복사

이것은 코드에서는 키프레임을 사용하여 불투명도 및 표시 속성에 별도로 애니메이션을 적용합니다. 표시 속성은 없음에서 0% 차단으로 갑자기 변경되고, 불투명도는 지정된 여유 함수에 따라 0.5초에 걸쳐 0에서 1로 부드럽게 전환됩니다.

위 내용은 CSS 디스플레이를 갑자기 변경하는 동안 부드러운 불투명도 전환을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!