Even better animations

package/src/pages/blog/[slug].astro

@@ -30,7 +30,7 @@ const post = await getPost(slug);
       loading="eager"
       transition:name={'hero:' + post.coverImage.url}
     />
-    <h1 class="text-4xl font-bold pt-5">{post.title}</h1>
+    <h1 class="text-4xl font-bold pt-5" transition:name={'banner'} transition:animate={'fade'}>{post.title}</h1>
     <h2 class="text-xl pt-3 pb-3" aria-label="CoverPhoto Subtitle">{post.subtitle}</h2>
 
     <Author post={post}/>

package/src/pages/blog/about.astro

@@ -9,7 +9,9 @@ const data = await getAboutPage();
 
 <Layout pageTitle="About">
   <div class="flex flex-col justify-center p-2">
-    <h2 class="text-3xl mb-3">{data.title} Page</h2>
+    <h2 class="text-3xl mb-3" 
+    transition:name={'banner'}
+    transition:animate={'fade'}>{data.title}</h2>
     <div class="about-content">
       <Markdown content={data.content.markdown} 
       components={{

package/src/pages/blog/index.astro

@@ -10,7 +10,7 @@ const allPosts = data.publication.posts.edges;
 ---
 <Layout pageTitle="Blog">
 	<div class="flex flex-col justify-center items-center p-2">
-		<h2 class="text-2xl pt-2 font-semibold">{`Welcome to ${pub.displayTitle || pub.title}`}</h2>
+		<h2 transition:animate={'fade'} transition:name={'banner'} class="text-2xl pt-2 font-semibold">{`Welcome to ${pub.displayTitle || pub.title}`}</h2>
 		<Posts allPosts={allPosts}/>
 
 	</div>

package/src/pages/index.astro

@@ -18,7 +18,8 @@ import background from "../assets/blog.jpg";
 		/>
 		<div 
 			class="absolute p-2 flex flex-col justify-center items-center z-10 bg-purple-50 lg:w-2/5 h-1/4 rounded-md"
-			transition:animate={'slide'}
+			transition:name={'banner'}
+			transition:animate={'fade'}
 		>
 			<div class="flex pb-5 mb-5 text-5xl text-purple-800">
 				<p>Hashnode Blog</p>