Files
fizzy/app/assets/stylesheets/animation.css
T
2025-04-09 11:50:23 -05:00

30 lines
657 B
CSS

@layer utilities {
.shake {
animation: shake 400ms both;
}
@keyframes appear-then-fade {
0%,100% { opacity: 0; }
5%,60% { opacity: 1; }
}
/* Keyframes */
@keyframes react {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(1.15); opacity: 1; }
100% { transform: scale(1); }
}
@keyframes scale-fade-out {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(0); opacity: 0; }
}
@keyframes shake {
0% { transform: translateX(-2rem); }
25% { transform: translateX(2rem); }
50% { transform: translateX(-1rem); }
75% { transform: translateX(1rem); }
}
}