加上这个类, div 在 500 ms 内透明度由 0 变为 1 , 位置有往下 10% 变回固定位置, 效果类似于渐变弹出

css 使某个 div 渐变显现

@keyframes wrapper-gradient {
    0% {
        transform: translateY(5%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes fade-in {
    0% {opacity: 0;}/*初始状态 透明度为0*/
    40% {opacity: 0;}/*过渡状态 透明度为0*/
    100% {opacity: 1;}/*结束状态 透明度为1*/
}
@-webkit-keyframes fade-in {/*针对webkit内核*/
    0% {opacity: 0;}
    40% {opacity: 0;}
    100% {opacity: 1;}
}
/*加上这个类, div 在 500 ms 内透明度由 0 变为 1 , 位置有往下 10% 变回固定位置, 效果类似于渐变弹出*/
.gradient-wrapper {
    display: inline-block;
    overflow: hidden;
    animation:
            wrapper-gradient 500ms linear,
            fade-in 500ms linear;
}