Fix grass mirroring: use dedicated flipped keyframe animation instead of inline transform that was overridden by grassSway
This commit is contained in:
1 parent
fc5f68012e
commit
dc32e1c7ab
2 files changed
+9
-1
No files matched your search
@@ -1445,7 +1445,7 @@ class Game {
|
|||||||
span.style.top = y + 'px';
|
span.style.top = y + 'px';
|
||||||
span.style.animationDelay = (Math.random() * 4).toFixed(2) + 's';
|
span.style.animationDelay = (Math.random() * 4).toFixed(2) + 's';
|
||||||
span.style.animationDuration = (2 + Math.random() * 2).toFixed(1) + 's';
|
span.style.animationDuration = (2 + Math.random() * 2).toFixed(1) + 's';
|
||||||
if (Math.random() > 0.5) span.style.transform = 'scaleX(-1)';
|
if (Math.random() > 0.5) span.classList.add('tall-grass-flip');
|
||||||
container.appendChild(span);
|
container.appendChild(span);
|
||||||
}
|
}
|
||||||
this._rocks = [];
|
this._rocks = [];
|
||||||
|
|||||||
@@ -511,6 +511,14 @@ html, body {
|
|||||||
50% { transform: rotate(2deg) scaleY(1.05); }
|
50% { transform: rotate(2deg) scaleY(1.05); }
|
||||||
100% { transform: rotate(-3deg) scaleY(1); }
|
100% { transform: rotate(-3deg) scaleY(1); }
|
||||||
}
|
}
|
||||||
|
.tall-grass-flip {
|
||||||
|
animation: grassSwayFlip 2s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
@keyframes grassSwayFlip {
|
||||||
|
0% { transform: scaleX(-1) rotate(-3deg) scaleY(1); }
|
||||||
|
50% { transform: scaleX(-1) rotate(2deg) scaleY(1.05); }
|
||||||
|
100% { transform: scaleX(-1) rotate(-3deg) scaleY(1); }
|
||||||
|
}
|
||||||
/* Directional nudge arrow */
|
/* Directional nudge arrow */
|
||||||
.map-dir-arrow {
|
.map-dir-arrow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
Reference in new issue
Block a user