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
}