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

Creating Smooth Transitions for CSS Display and Opacity Properties

You've encountered an issue where you're trying to animate the display and opacity properties of an element, but the display change is interfering with the transition. To achieve the desired result, where the opacity smoothly transitions while the display property changes abruptly, you can utilize the following solution:

Michael's response offers a comprehensive CSS code approach:

<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>

This code uses keyframes to animate the opacity and display properties separately. The display property changes abruptly from none to block at 0%, while the opacity smoothly transitions from 0 to 1 over 0.5 seconds according to the specified easing function.

The above is the detailed content of How to Achieve Smooth Opacity Transitions While Abruptly Changing CSS Display?. For more information, please follow other related articles on the PHP Chinese website!