Browse Source

feat: add shake animation CSS for delete button confirmation state

Define @keyframes shake and @utility animate-shake in globals.css
so the DeleteButton component's confirming state visual feedback works.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
User 2 months ago
parent
commit
9d3dc70f87
1 changed files with 10 additions and 0 deletions
  1. 10 0
      src/app/globals.css

+ 10 - 0
src/app/globals.css

@@ -24,3 +24,13 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  20%, 60% { transform: translateX(-4px); }
+  40%, 80% { transform: translateX(4px); }
+}
+
+@utility animate-shake {
+  animation: shake 0.5s ease-in-out;
+}