css3 页面退出和进入的动画

时间：2015-12-22 19:10:27 收藏：0 阅读：2461

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