fix breathing animation
This commit is contained in:
parent
186b02a132
commit
732e5a3d47
1 changed files with 6 additions and 8 deletions
|
@ -107,7 +107,7 @@ html {
|
||||||
--side: min(65vh, 70vw);
|
--side: min(65vh, 70vw);
|
||||||
--half: calc(var(--side) * .5);
|
--half: calc(var(--side) * .5);
|
||||||
--nhalf: calc(0em - var(--half));
|
--nhalf: calc(0em - var(--half));
|
||||||
--breathe: calc(var(--side) * .1);
|
--breathe: calc(var(--side) * 0.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
#outer {
|
#outer {
|
||||||
|
@ -135,14 +135,12 @@ html {
|
||||||
overscroll-behavior: contain;
|
overscroll-behavior: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
@supports (scrollbar-color: pink orange) { /* safari detector */
|
#cube:not([data-moving]) > section:not([data-state=active]) {
|
||||||
#cube:not([data-moving]) > section {
|
animation: breathe 7.5s infinite ease-in-out;
|
||||||
animation: breathe 9s infinite ease-in-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes breathe {
|
@keyframes breathe {
|
||||||
35% { transform: translateZ(var(--breathe)) var(--base-transform); }
|
40% { transform: var(--base-transform) translateZ(var(--breathe)); }
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
|
Loading…
Add table
Reference in a new issue