game/2d/ui/screenshaker.scss
root {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
z-index: 0;
}
.screen-shake {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
}
.screen-shake.shake-small { animation: shake-small 0.25s ease-out; }
.screen-shake.shake-medium { animation: shake-medium 0.35s ease-out; }
.screen-shake.shake-strong { animation: shake-strong 0.45s ease-out; }
.screen-shake.shake-insane { animation: shake-insane 0.55s ease-out; }
@keyframes shake-small {
0%,100% { transform: translate(0,0); }
25% { transform: translate(-2px, 1px); }
50% { transform: translate(2px, -1px); }
75% { transform: translate(-1px, 2px); }
}
@keyframes shake-medium {
0%,100% { transform: translate(0,0); }
20% { transform: translate(-4px, 2px) rotate(-0.3deg); }
40% { transform: translate(4px,-3px) rotate(0.3deg); }
60% { transform: translate(-3px, 3px) rotate(-0.2deg); }
80% { transform: translate(3px,-2px) rotate(0.2deg); }
}
@keyframes shake-strong {
0%,100% { transform: translate(0,0); }
15% { transform: translate(-6px, 3px) rotate(-0.5deg); }
30% { transform: translate(6px,-4px) rotate(0.5deg); }
45% { transform: translate(-5px, 5px) rotate(-0.4deg); }
60% { transform: translate(5px,-4px) rotate(0.4deg); }
75% { transform: translate(-3px, 2px); }
90% { transform: translate(2px,-2px); }
}
@keyframes shake-insane {
0%,100% { transform: translate(0,0); }
10% { transform: translate(-9px, 5px) rotate(-0.7deg); }
20% { transform: translate(9px,-6px) rotate(0.7deg); }
30% { transform: translate(-8px, 7px) rotate(-0.6deg); }
40% { transform: translate(8px,-6px) rotate(0.6deg); }
50% { transform: translate(-6px, 5px) rotate(-0.4deg); }
60% { transform: translate(6px,-5px) rotate(0.4deg); }
70% { transform: translate(-4px, 3px); }
80% { transform: translate(3px,-3px); }
90% { transform: translate(-1px, 1px); }
}