Recriando animação usada no antigo blog

SeraphyBR · Apr 7, 2024 · 621da94 · 621da94
1 parent 195059d
commit 621da94
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src/pages/home.rs b/src/pages/home.rs
@@ -10,7 +10,7 @@ pub fn HomePage() -> impl IntoView {
     view! {
         <BasePage title="Home" class="!tw-max-w-lg">
             <div class="tw-vflex tw-justify-center tw-items-center tw-gap-2">
-                <img src="/img/logo.png" class="tw-mx-auto tw-rounded-[50%] tw-w-36 tw-h-36"/>
+                <img src="/img/logo.png" class="tw-mx-auto tw-rounded-[50%] tw-w-36 tw-h-36 tw-animate-rotateIn"/>
                 <h3 class="tw-text-xl tw-font-light">"SeraphyBR's Blog"</h3>
                 <Divider />
                 <h3 class="tw-text-base tw-font-light">"Desenvolvedor - Página em construção"</h3>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -16,6 +16,23 @@ module.exports = {
       backgroundImage: {
         'forest-stairs': "url('/img/background-1.jpg')",
       },
+      animation: {
+        rotateIn: 'rotateIn 1s both'
+      },
+      keyframes: {
+        rotateIn: {
+          '0%': {
+            transform: 'rotate3d(0,0,1,-200deg)',
+            transformOrigin: 'center',
+            opacity: '0'
+          },
+          '100%': {
+            transform: 'none',
+            transformOrigin: 'center',
+            opacity: '1'
+          }
+        }
+      }
     },
   },
   plugins: [require('@tailwindcss/typography')],