hamid zarghami
88 lines
2.0 KiB
CSS
88 lines
2.0 KiB
CSS
/* PowerPoint-style entrance animations for viewer (keyframes use --ve-* vars from JS) */
|
|
|
|
/*
|
|
* Hint GPU compositing layer on page elements to prevent blank/white pages
|
|
* during page flip animations on iOS 17/18 Safari (WebKit compositing bug
|
|
* triggered when isolation:isolate interacts with 3D CSS transforms).
|
|
*/
|
|
.stf__block,
|
|
.stf__item,
|
|
.page {
|
|
will-change: transform;
|
|
}
|
|
|
|
@keyframes viewer-entrance-fade {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: var(--ve-opacity-end, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes viewer-entrance-fly-left {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(calc(-1 * var(--ve-dist, 48px))) rotate(var(--ve-rot, 0deg));
|
|
}
|
|
to {
|
|
opacity: var(--ve-opacity-end, 1);
|
|
transform: translateX(0) rotate(var(--ve-rot, 0deg));
|
|
}
|
|
}
|
|
|
|
@keyframes viewer-entrance-fly-right {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(var(--ve-dist, 48px)) rotate(var(--ve-rot, 0deg));
|
|
}
|
|
to {
|
|
opacity: var(--ve-opacity-end, 1);
|
|
transform: translateX(0) rotate(var(--ve-rot, 0deg));
|
|
}
|
|
}
|
|
|
|
@keyframes viewer-entrance-fly-top {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(calc(-1 * var(--ve-dist, 48px))) rotate(var(--ve-rot, 0deg));
|
|
}
|
|
to {
|
|
opacity: var(--ve-opacity-end, 1);
|
|
transform: translateY(0) rotate(var(--ve-rot, 0deg));
|
|
}
|
|
}
|
|
|
|
@keyframes viewer-entrance-fly-bottom {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(var(--ve-dist, 48px)) rotate(var(--ve-rot, 0deg));
|
|
}
|
|
to {
|
|
opacity: var(--ve-opacity-end, 1);
|
|
transform: translateY(0) rotate(var(--ve-rot, 0deg));
|
|
}
|
|
}
|
|
|
|
@keyframes viewer-entrance-zoom-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.35) rotate(var(--ve-rot, 0deg));
|
|
}
|
|
to {
|
|
opacity: var(--ve-opacity-end, 1);
|
|
transform: scale(1) rotate(var(--ve-rot, 0deg));
|
|
}
|
|
}
|
|
|
|
@keyframes viewer-entrance-zoom-out {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(1.45) rotate(var(--ve-rot, 0deg));
|
|
}
|
|
to {
|
|
opacity: var(--ve-opacity-end, 1);
|
|
transform: scale(1) rotate(var(--ve-rot, 0deg));
|
|
}
|
|
}
|