66 lines
1.2 KiB
CSS
66 lines
1.2 KiB
CSS
@-webkit-keyframes slideLeftIn {
|
|
0% {
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideLeftIn {
|
|
0% {
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes slideRightOut {
|
|
0% {
|
|
-webkit-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes slideRightOut {
|
|
0% {
|
|
-webkit-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.slide-left-in {
|
|
-webkit-animation: slideLeftIn 0.2s forwards;
|
|
animation: slideLeftIn 0.2s forwards;
|
|
}
|
|
|
|
.slide-right-out {
|
|
-webkit-animation: slideRightOut 0.2s forwards;
|
|
animation: slideRightOut 0.2s forwards;
|
|
}
|