如何在 CSS 动画中平滑过渡显示和不透明度属性？-css教程-PHP中文网

如何在 CSS 动画中平滑过渡显示和不透明度属性？

Barbara Streisand

发布： 2024-11-02 16:37:31

原创

710 人浏览过

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

转换 CSS 显示和不透明度属性

在 CSS 动画中，同时转换显示和不透明度属性可能具有挑战性。当尝试通过在悬停时修改元素的显示和不透明度值来显示元素时，这一点变得很明显，如给定的代码片段所示：

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

登录后复制

此代码无法转换显示属性，导致突然出现元素的外观。为了实现两个属性的平滑过渡，建议使用以下技术：

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

登录后复制

此方法利用 CSS 动画 fadeInFromNone 来控制两个属性的过渡。动画从元素隐藏且完全透明开始（显示：无；不透明度：0）。然后，它会短暂地使元素可见，但保留其透明度（显示：块；不透明度：0）以触发显示转换。最后，元素变得完全可见且不透明（显示：块；不透明度：1）。可以通过调整动画规则中的计时和缓动功能来自定义显示和不透明度的过渡。

以上是如何在 CSS 动画中平滑过渡显示和不透明度属性？的详细内容。更多信息请关注PHP中文网其他相关文章！