2016-05-29 14:02:47 -07:00
|
|
|
.mainAnimatedPage {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
contain: layout style;
|
|
|
|
/* Can't use will-change because it causes the alpha picker to move when the page scrolls*/
|
|
|
|
/*will-change: transform;*/
|
2016-10-15 15:12:16 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes view-fadeout {
|
|
|
|
from {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
to {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes view-fadein {
|
|
|
|
from {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
to {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes view-slideleft {
|
|
|
|
from {
|
|
|
|
transform: translate3d(100%, 0, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
to {
|
|
|
|
transform: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes view-slideleft-r {
|
|
|
|
from {
|
|
|
|
transform: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
to {
|
|
|
|
transform: translate3d(-100%, 0, 0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes view-slideright {
|
|
|
|
from {
|
|
|
|
transform: translate3d(-100%, 0, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
to {
|
|
|
|
transform: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes view-slideright-r {
|
|
|
|
from {
|
|
|
|
transform: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
to {
|
|
|
|
transform: translate3d(100%, 0, 0);
|
|
|
|
}
|
2016-05-29 14:02:47 -07:00
|
|
|
}
|