如何在突然改变 CSS 显示的同时实现平滑的不透明度过渡？-css教程-PHP中文网

如何在突然改变 CSS 显示的同时实现平滑的不透明度过渡？

Patricia Arquette

发布： 2024-11-01 00:31:28

原创

886 人浏览过

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

为 CSS 显示和不透明度属性创建平滑过渡

您在尝试设置显示和不透明度动画时遇到问题元素的属性，但显示更改会干扰转换。为了达到不透明度平滑过渡而显示属性突然变化的预期结果，您可以使用以下解决方案：

Michael 的回复提供了全面的 CSS 代码方法：

<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代码使用关键帧分别对不透明度和显示属性进行动画处理。显示属性从无突然变为 0% 时阻塞，而不透明度根据指定的缓动函数在 0.5 秒内从 0 平滑过渡到 1。

以上是如何在突然改变 CSS 显示的同时实现平滑的不透明度过渡？的详细内容。更多信息请关注PHP中文网其他相关文章！