castad
/
o2o-infinith-demo
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: reduce blob animation range + force GPU with translate3d 

Halved blob movement (30px→15px, 8vw→4vw) and reduced scale
(1.1→1.05). Using translate3d forces GPU compositing layer,
preventing main-thread layout recalculation that causes jitter.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
claude/bold-hawking
Haewon Kam 2026-04-04 00:48:42 +09:00
parent c07f839773
commit 163751410f
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/index.css
View File

@ -40,16 +40,16 @@
@keyframes blob { @keyframes blob {
0% { 0% {
transform: translate(0px, 0px) scale(1); transform: translate3d(0, 0, 0) scale(1);
} }
33% { 33% {
transform: translate(30px, -50px) scale(1.1); transform: translate3d(15px, -25px, 0) scale(1.05);
} }
66% { 66% {
transform: translate(-20px, 20px) scale(0.9); transform: translate3d(-10px, 10px, 0) scale(0.95);
} }
100% { 100% {
transform: translate(0px, 0px) scale(1); transform: translate3d(0, 0, 0) scale(1);
} }
} }
@ -112,16 +112,16 @@
@keyframes blob-large { @keyframes blob-large {
0% { 0% {
transform: translate(0px, 0px) scale(1); transform: translate3d(0, 0, 0) scale(1);
} }
33% { 33% {
transform: translate(8vw, -8vh) scale(1.1); transform: translate3d(4vw, -4vh, 0) scale(1.05);
} }
66% { 66% {
transform: translate(-8vw, 8vh) scale(0.9); transform: translate3d(-4vw, 4vh, 0) scale(0.95);
} }
100% { 100% {
transform: translate(0px, 0px) scale(1); transform: translate3d(0, 0, 0) scale(1);
} }
} }