2019-03-24 11:38:51 +00:00
|
|
|
.mainAnimatedPage {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
contain: layout style size;
|
2020-01-22 21:40:45 +01:00
|
|
|
|
2020-01-19 14:42:13 +01:00
|
|
|
/* Can't use will-change because it causes the alpha picker to move when the page scrolls */
|
2020-01-22 21:40:45 +01:00
|
|
|
|
2020-01-19 14:42:13 +01:00
|
|
|
/* will-change: transform; */
|
2019-03-24 11:38:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes view-fadeout {
|
|
|
|
from {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
to {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
2020-01-19 13:32:59 +01:00
|
|
|
|
2019-03-24 11:38:51 +00:00
|
|
|
@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);
|
|
|
|
}
|
2020-01-19 14:59:39 +01:00
|
|
|
}
|