在更改显示和不透明度时如何创建平滑的 CSS 过渡？-css教程-PHP中文网

在更改显示和不透明度时如何创建平滑的 CSS 过渡？

Susan Sarandon

发布： 2024-10-30 04:57:03

原创

291 人浏览过

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

通过显示和不透明度更改创建平滑的 CSS 过渡

在 Web 开发领域，创建具有视觉吸引力的交互式用户界面至关重要。 CSS 动画在实现这一目标方面发挥着至关重要的作用，它使我们能够在元素的不同状态之间无缝转换。

使用 CSS3 动画时，经常会遇到需要转换多个属性的情况，例如不透明度和显示。然而，组合这些属性可能会很棘手，因为直接转换显示属性可能会导致突然的变化。

考虑以下 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;
}

登录后复制

此代码旨在淡入元素悬停时的“子”类。然而，它无法正常工作，因为显示属性从“无”到“块”的直接转换会产生突然的外观。

为了解决这个问题，我们可以利用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;
    }
}

登录后复制

在此代码中，“fadeInFromNone”关键帧动画用于将不透明度从 0 过渡到 1，同时还将显示属性设置为 1% 的“block”避免突然出现。

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