如何在悬停时无缝转换 CSS `display` 和 `opacity` 属性？-css教程-PHP中文网

如何在悬停时无缝转换 CSS `display` 和 `opacity` 属性？

Barbara Streisand

发布： 2024-10-30 06:16:27

原创

938 人浏览过

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

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

在 CSS3 动画领域，尝试转换多个属性（特别是显示和不透明度）时会出现问题。正如您所强调的，当悬停期间修改显示属性时，它会破坏不透明度的平滑过渡。

为了解决这个困境，设计了一个创造性的解决方案。通过利用 @keyframes 规则，我们本质上定义了一个模仿显示属性过渡外观的自定义动画。诀窍是从“display: none”优雅地过渡到“display: block”，同时控制元素的不透明度。

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>

登录后复制

在此代码中，@keyframes 规则定义了一个命名动画“fadeInFromNone”，该动画将元素的不透明度从 0 转换为 1，同时将显示属性从“none”设置为“block”。计时和缓动功能可以根据需要进行调整。

通过实施此解决方案，您可以轻松转换显示和不透明度属性，确保悬停时获得平滑且视觉上迷人的效果。

以上是如何在悬停时无缝转换 CSS `display` 和 `opacity` 属性？的详细内容。更多信息请关注PHP中文网其他相关文章！