css3 页面退出和进入的动画

@-webkit-keyframes slideIn {
from {
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0)
}

to {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0)
}
}

@keyframes slideIn {
from {
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0)
}

to {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0)
}
}

@-webkit-keyframes slideOut {
from {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0)
}

to {
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0)
}
}

@keyframes slideOut {
from {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0)
}

to {
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0)
}
}

.page.slideIn {
-webkit-animation: slideIn .2s forwards;
animation: slideIn .2s forwards
}

.page.slideOut {
-webkit-animation: slideOut .2s forwards;
animation: slideOut .2s forwards
}

转载于:https://www.cnblogs.com/shawn-en/p/5067686.html