디스플레이와 불투명도를 모두 변경할 때 부드러운 CSS 전환을 만들려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

디스플레이와 불투명도를 모두 변경할 때 부드러운 CSS 전환을 만들려면 어떻게 해야 합니까?

Susan Sarandon

풀어 주다： 2024-10-30 04:57:03

원래의

288명이 탐색했습니다.

How can I create smooth CSS transitions when changing both display and opacity?

디스플레이 및 불투명도 변경으로 부드러운 CSS 전환 만들기

웹 개발 세계에서는 시각적으로 매력적이고 대화형 사용자 인터페이스를 만드는 것이 필수적입니다. CSS 애니메이션은 이를 달성하는 데 중요한 역할을 하며 요소의 다양한 상태 간에 원활하게 전환할 수 있도록 해줍니다.

CSS3 애니메이션으로 작업할 때 다음과 같이 여러 속성을 전환해야 하는 상황에 직면하는 것은 드문 일이 아닙니다. 불투명도 및 표시. 그러나 디스플레이 속성을 직접 전환하면 갑작스러운 변경이 발생할 수 있으므로 이러한 속성을 결합하는 것은 까다로울 수 있습니다.

다음 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;
}

로그인 후 복사

이 코드는 다음을 사용하여 요소를 페이드 인하는 것을 목표로 합니다. 마우스를 올리면 'child' 클래스가 나타납니다. 그러나 표시 속성을 'none'에서 'block'으로 직접 전환하면 갑작스러운 모양이 생성되기 때문에 올바르게 작동하지 않습니다.

이 문제를 해결하기 위해 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;
    }
}

로그인 후 복사

이 코드에서 'fadeInFromNone' 키프레임 애니메이션은 불투명도를 0에서 1로 전환하는 동시에 표시 속성을 1%에서 'block'으로 설정하는 데 사용됩니다. 갑작스러운 모습은 피해주세요.

위 내용은 디스플레이와 불투명도를 모두 변경할 때 부드러운 CSS 전환을 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!