add ticket animation / link

2024-07-31 07:59:51 +02:00 · 2024-07-31 07:59:51 +02:00 · 8a1f9370dd
commit 8a1f9370dd
parent be549bba16
11 changed files with 89 additions and 7 deletions
--- a/assets/css/src/generic.css
+++ b/assets/css/src/generic.css
@ -12,3 +12,50 @@ body.progress * {
 .grid__item {
  grid-column: span var(--span);
 }
+
+@keyframes vibrate {
+  0%,
+  100% {
+    scale: 1;
+    transform: rotate(0deg);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: rotate(5deg);
+  }
+
+  20% {
+    scale: 0.95;
+  }
+
+  50% {
+    scale: 1.05;
+  }
+
+  80% {
+    scale: 0.95;
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: rotate(-5deg);
+  }
+}
+
+.ticket:hover svg {
+  animation: vibrate 0.5s forwards;
+}
+
+.ticket:hover svg path:not(.dot) {
+  fill: var(--color-salmon);
+  stroke: var(--color-salmon);
+}
+
+.ticket:hover svg path.dot {
+  fill: #fff;
+}