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);
|
||||
--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) {
|
||||
|
|
Loading…
Add table
Reference in a new issue