ltadeu6/skeledance
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix meteor animation: animate transform instead of static translate

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ltadeu6 2026-06-07 10:17:35 -03:00
parent 1e9b63e577
commit 238c56eba4
No known key found for this signature in database
GPG key ID: FB9FDAB6B6F3418D
1 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
plugin/contents/ui/dancer.html
View file

@ -122,10 +122,10 @@ html, body {
animation: meteorFall linear forwards; animation: meteorFall linear forwards;
} }
@keyframes meteorFall { @keyframes meteorFall {
0% { opacity: 0; } 0% { opacity: 0; transform: rotate(var(--rot)) translateY(0); }
5% { opacity: 1; } 5% { opacity: 1; }
85% { opacity: 1; } 85% { opacity: 1; }
100% { opacity: 0; } 100% { opacity: 0; transform: rotate(var(--rot)) translateY(var(--dist)); }
} }
/* ============================================================ /* ============================================================
@ -911,13 +911,13 @@ function spawnMeteor() {
const dur = 1.2 + Math.random() * 1.8; // seconds const dur = 1.2 + Math.random() * 1.8; // seconds
const color = `rgba(${180+Math.random()*75|0},${180+Math.random()*75|0},255,0.9)`; const color = `rgba(${180+Math.random()*75|0},${180+Math.random()*75|0},255,0.9)`;
el.style.cssText = ` el.style.cssText = `
--rot:${angle}deg;
--dist:${(window.innerHeight + len * 2)}px;
left:${x}%; top:${-len}px; left:${x}%; top:${-len}px;
height:${len}px; height:${len}px;
background:linear-gradient(to bottom, transparent, ${color}); background:linear-gradient(to bottom, transparent, ${color});
transform:rotate(${angle}deg);
animation-duration:${dur}s; animation-duration:${dur}s;
animation-name:meteorFall; animation-name:meteorFall;
translate:0 ${(window.innerHeight + len) * 1.3}px;
`; `;
document.querySelector('.scene').appendChild(el); document.querySelector('.scene').appendChild(el);
setTimeout(() => el.remove(), dur * 1000); setTimeout(() => el.remove(), dur * 1000);