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

Creating Smooth CSS Transitions with Display and Opacity Changes

In the world of web development, creating visually appealing and interactive user interfaces is essential. CSS animations play a vital role in achieving this, allowing us to seamlessly transition between different states of an element.

When working with CSS3 animations, it's not uncommon to encounter situations where you need to transition multiple properties, such as opacity and display. However, combining these properties can be tricky, as transitioning display property directly may result in abrupt changes.

Consider the following CSS code:

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

This code aims to fade in an element with the 'child' class on hover. However, it fails to work correctly because the direct transition of the display property from 'none' to 'block' creates an abrupt appearance.

To address this issue, we can leverage CSS keyframes to achieve a smooth transition between the two states. The following code demonstrates this approach:

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

In this code, the 'fadeInFromNone' keyframes animation is used to transition the opacity from 0 to 1 while also setting the display property to 'block' at 1% to avoid the abrupt appearance.

The above is the detailed content of How can I create smooth CSS transitions when changing both display and opacity?. For more information, please follow other related articles on the PHP Chinese website!