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

Transitioning CSS Display and Opacity Properties Seamlessly

In the realm of CSS3 animations, an issue arises when attempting to transition multiple properties, specifically display and opacity. As you highlighted, when the display property is modified during hover, it disrupts the smooth transition of opacity.

To resolve this dilemma, a creative solution was devised. By utilizing the @keyframes rule, we essentially define a custom animation that mimics the appearance of the display property transition. The trick is to gracefully transition from "display: none" to "display: block" while controlling the opacity of the element.

The modified CSS code presented by Michael serves as an elegant solution:

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

In this code, the @keyframes rule defines a named animation "fadeInFromNone" that transitions the element's opacity from 0 to 1 while simultaneously setting the display property to "block" from "none." The timing and easing function can be adjusted as desired.

By implementing this solution, you can effortlessly transition both display and opacity properties, ensuring a smooth and visually captivating effect upon hover.

The above is the detailed content of How to Seamlessly Transition CSS `display` and `opacity` Properties on Hover?. For more information, please follow other related articles on the PHP Chinese website!