CSS3弹窗动画效果

自上到下

.fadein {
    animation: fadein .5s;
}
@keyframes fadein {
    0% {
        transform: translate(0, -100%);
    }
    100% {
        transform: none;
    }
}

自下到上

.fadein {
    animation: fadein .5s;
}
@keyframes fadein {
    0% {
        transform: translate(0,100%);
    }
    100% {
        transform: none;
    }
}

自左到右

.fadein {
    animation: fadein .5s;
}
@keyframes fadein {
    0% {
        transform: translate(-100%,0);
    }
    100% {
        transform: none;
    }
}

自右到左

.fadein {
    animation: fadein .5s;
}
@keyframes fadein {
    0% {
        transform: translate(100%, 0);
    }
    100% {
        transform: none;
    }
}
posted @ 2022-12-06 17:22  tulintao  阅读(524)  评论(0)  编辑  收藏  举报