Home >Web Front-end >CSS Tutorial >How to smoothly transition both display and opacity properties in CSS animations?

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

Barbara Streisand
Barbara StreisandOriginal
2024-11-02 16:37:31666browse

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

Transitioning CSS Display and Opacity Properties

In CSS animations, it can be challenging to simultaneously transition both display and opacity properties. This becomes evident when attempting to make an element appear by modifying its display and opacity values upon hover, as seen in the given code snippet:

.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 fails to transition the display property, resulting in an abrupt appearance of the element. To achieve a smooth transition for both properties, the following technique is recommended:

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

This approach utilizes a CSS animation, fadeInFromNone, to control the transition of both properties. The animation starts with the element hidden and fully transparent (display: none; opacity:0). It then briefly makes the element visible but retains its transparency (display: block; opacity:0) to trigger the display transition. Finally, the element becomes fully visible and opaque (display: block; opacity:1). The transitions for display and opacity can be customized by adjusting the timing and easing functions in the animation rules.

The above is the detailed content of How to smoothly transition both display and opacity properties in CSS animations?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn