135 lines
2.9 KiB
CSS
135 lines
2.9 KiB
CSS
@layer motion {
|
|
/* Content only starts hidden when JS runs and nobody asked for less motion */
|
|
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
|
|
[data-reveal] {
|
|
opacity: 0;
|
|
translate: 0 1.75rem;
|
|
transition:
|
|
opacity 0.9s var(--ease-out) var(--delay, 0s),
|
|
translate 0.9s var(--ease-out) var(--delay, 0s);
|
|
}
|
|
|
|
[data-reveal="mask"] {
|
|
opacity: 1;
|
|
translate: none;
|
|
clip-path: inset(0 -0.2em 100% -0.2em);
|
|
transform: translateY(0.35em);
|
|
transition:
|
|
clip-path 1.1s var(--ease-out) var(--delay, 0s),
|
|
transform 1.1s var(--ease-out) var(--delay, 0s);
|
|
}
|
|
|
|
[data-reveal].is-visible {
|
|
opacity: 1;
|
|
translate: none;
|
|
}
|
|
|
|
[data-reveal="mask"].is-visible {
|
|
clip-path: inset(-0.2em -0.2em -0.3em -0.2em);
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@supports (animation-timeline: view()) {
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.timeline::after {
|
|
animation: grow linear both;
|
|
animation-timeline: view();
|
|
animation-range: entry 20% cover 70%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0s !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0s !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
@keyframes drift {
|
|
from { translate: 0 0; scale: 1; }
|
|
to { translate: -6% 4%; scale: 1.08; }
|
|
}
|
|
|
|
@keyframes ping {
|
|
0% { scale: 1; opacity: 0.7; }
|
|
80%, 100% { scale: 3; opacity: 0; }
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.25; }
|
|
}
|
|
|
|
@keyframes load {
|
|
from { translate: -30% 0; }
|
|
to { translate: 60% 0; }
|
|
}
|
|
|
|
@keyframes flow {
|
|
from { stroke-dashoffset: 106; }
|
|
to { stroke-dashoffset: 0; }
|
|
}
|
|
|
|
@keyframes sort {
|
|
0%, 12% { height: var(--from); }
|
|
40%, 75% { height: var(--to); }
|
|
100% { height: var(--from); }
|
|
}
|
|
|
|
@keyframes playhead {
|
|
from { left: calc(0.9rem + var(--label)); }
|
|
to { left: calc(100% - 0.9rem); }
|
|
}
|
|
|
|
@keyframes marquee {
|
|
to { translate: -100% 0; }
|
|
}
|
|
|
|
@keyframes grow {
|
|
from { scale: 1 0; }
|
|
to { scale: 1 1; }
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
}
|
|
|
|
@keyframes vt-out {
|
|
to { opacity: 0; translate: 0 -0.75rem; }
|
|
}
|
|
|
|
@keyframes vt-in {
|
|
from { opacity: 0; translate: 0 1.25rem; }
|
|
}
|
|
}
|
|
|
|
/* Cross-document page transitions, outside of the layers on purpose */
|
|
@view-transition {
|
|
navigation: auto;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
@view-transition {
|
|
navigation: none;
|
|
}
|
|
}
|
|
|
|
::view-transition-old(root) {
|
|
animation: 0.3s var(--ease-in-out) both vt-out;
|
|
}
|
|
|
|
::view-transition-new(root) {
|
|
animation: 0.55s var(--ease-out) both vt-in;
|
|
}
|
|
|
|
::view-transition-group(project-cover) {
|
|
animation-duration: 0.6s;
|
|
animation-timing-function: var(--ease-out);
|
|
}
|