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;
    }
}