use plugin to declare timeline keyframes

Trombach · Oct 5, 2024 · ade6495 · ade6495
1 parent 29287ee
commit ade6495
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -166,20 +166,6 @@ const { title, description = "Lukas' Homepage" } = Astro.props;
         p {
           @apply max-w-[70ch] text-pretty;
         }
-
-        @keyframes slide-scale-in-bottom {
-          from {
-            transform: translateY(100px);
-            scale: 0.8;
-            opacity: 0;
-          }
-          ,
-          to {
-            transform: translateY(0);
-            scale: 1;
-            opacity: 1;
-          }
-        }
       }
     </style>
   </body>

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -18,7 +18,7 @@ const animationDelay = plugin(({ matchUtilities, theme }) => {
   );
 });
 
-const timelineAnimation = plugin(({ addComponents }) => {
+const timelineAnimation = plugin(({ addComponents, addUtilities }) => {
   addComponents({
     ".timeline-slide-in-bottom": {
       "animation-timeline": "view()",
@@ -27,6 +27,21 @@ const timelineAnimation = plugin(({ addComponents }) => {
       "animation-fill-mode": "both",
     },
   });
+
+  addUtilities({
+    "@keyframes slide-scale-in-bottom": {
+      from: {
+        transform: "translateY(100px)",
+        scale: "0.8",
+        opacity: "0",
+      },
+      to: {
+        transform: "translateY(0)",
+        scale: "1",
+        opacity: "1",
+      },
+    },
+  });
 });
 
 const textShadow = plugin(({ matchUtilities, theme }) => {