animate logo

ubermanu · Sep 24, 2023 · 965f0bc · 965f0bc
1 parent 48c72da
commit 965f0bc
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/sites/roller/src/app.pcss b/sites/roller/src/app.pcss
@@ -3,3 +3,24 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.logo {
+  position: relative;
+  transform-origin: left center;
+  animation: drift 1.4s ease forwards;
+}
+
+@keyframes drift {
+  30% {
+    transform: translateX(10%);
+  }
+  50% {
+    transform: translateX(-50%);
+  }
+  90% {
+    transform: translateX(0) rotate(-10deg);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
diff --git a/sites/roller/src/routes/+page.svelte b/sites/roller/src/routes/+page.svelte
@@ -33,7 +33,7 @@
     <div class="my-auto">
       <img
         src={rollerIcon}
-        class="mx-auto mb-6 max-w-[100px] drop-shadow sm:max-w-[120px]"
+        class="logo mx-auto mb-6 max-w-[100px] drop-shadow sm:max-w-[120px]"
         alt=""
       />
       <h1 class="mb-4 font-serif text-3xl text-sky-950">Roller</h1>