css FadeIn过渡

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css FadeIn过渡相关的知识,希望对你有一定的参考价值。

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;

    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

以上是关于css FadeIn过渡的主要内容,如果未能解决你的问题,请参考以下文章

在 jQuery 中与 CSS 中的过渡同时使用淡入淡出和淡出

仅使用 CSS 的 div fadeIn 和 fadeOut(在追加和从 DOM 中删除)。可能吗?

CSS不透明度忽略过渡时间

原生JS实现过渡效果的轮播图

css [css:fadeout / fadein] css示例。 #css

css 自我调用fadeIn纯CSS