fix breathing animation

This commit is contained in:
Rhiannon Morris 2025-02-16 16:23:46 +01:00
parent 186b02a132
commit 732e5a3d47

View file

@ -107,7 +107,7 @@ html {
--side: min(65vh, 70vw);
--half: calc(var(--side) * .5);
--nhalf: calc(0em - var(--half));
--breathe: calc(var(--side) * .1);
--breathe: calc(var(--side) * 0.02);
}
#outer {
@ -135,14 +135,12 @@ html {
overscroll-behavior: contain;
}
@supports (scrollbar-color: pink orange) { /* safari detector */
#cube:not([data-moving]) > section {
animation: breathe 9s infinite ease-in-out;
}
#cube:not([data-moving]) > section:not([data-state=active]) {
animation: breathe 7.5s infinite ease-in-out;
}
@keyframes breathe {
35% { transform: translateZ(var(--breathe)) var(--base-transform); }
}
@keyframes breathe {
40% { transform: var(--base-transform) translateZ(var(--breathe)); }
}
@media (prefers-reduced-motion: no-preference) {