CSS 애니메이션에서 표시 속성과 불투명도 속성을 원활하게 전환하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS 애니메이션에서 표시 속성과 불투명도 속성을 원활하게 전환하는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-11-02 16:37:31

원래의

704명이 탐색했습니다.

How to smoothly transition both display and opacity properties in CSS animations?

CSS 표시 및 불투명도 속성 전환

CSS 애니메이션에서는 표시 속성과 불투명도 속성을 동시에 전환하는 것이 어려울 수 있습니다. 이는 주어진 코드 조각에서 볼 수 있듯이 마우스를 가져갈 때 표시 및 불투명도 값을 수정하여 요소를 표시하려고 할 때 분명해집니다.

.child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

로그인 후 복사

이 코드는 표시 속성을 전환하지 못하여 갑작스러운 오류가 발생합니다. 요소의 모습. 두 속성 모두에 대한 원활한 전환을 달성하려면 다음 기술을 사용하는 것이 좋습니다.

.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;
    }
}

로그인 후 복사

이 접근 방식은 CSS 애니메이션 fadeInFromNone을 활용하여 두 속성의 전환을 제어합니다. 애니메이션은 숨겨져 있고 완전히 투명한 요소로 시작됩니다(표시: 없음, 불투명도:0). 그런 다음 요소를 잠시 표시하지만 투명도(표시: 블록, 불투명도:0)를 유지하여 표시 전환을 트리거합니다. 마지막으로 요소가 완전히 표시되고 불투명해집니다(표시: 블록, 불투명도:1). 애니메이션 규칙의 타이밍 및 여유 기능을 조정하여 표시 및 불투명도 전환을 맞춤설정할 수 있습니다.

위 내용은 CSS 애니메이션에서 표시 속성과 불투명도 속성을 원활하게 전환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!