Create animated hero section using tailwind css keyframes

Hello! In this article i am going to show you how i created this animated hero section using custom key frames in tailwind css.

First i added a parent div with classes

<div class="w-full md:w-1/2 flex justify-center items-center transform scale-75 md:scale-125 translate-x-20 md:translate-x-40 translate-y-0 md:-translate-y-20">
</div>

and then added a img element in the center with classes

<img class="w-80 h-80 rounded-full border-4 border-white custom-shadow" src="./your-img-path.jpg" alt="">
// /app.css
//.custom-shadow{
//     box-shadow:0 0 15px rgba(0,0,0,0.5)
//}

Note: i added custom-shadow class because i wanted the offset of shadow to be (0,0), after that i added the inner circle div with classes

<div class="hw-inner flex justify-between items-center absolute border border-gray-800 rounded-full animate-spin-slow anim-8s">
    <div class="bg-white p-1 rounded-full custom-shadow h-10 w-10  transform -translate-x-5 ">
        <img class="h-9 w-9 object-center animate-rotate-img anim-8s" src="./assets/alpine.png" alt="">
    </div>
    <div class="bg-white overflow-hidden rounded-full custom-shadow h-10 w-10 transform translate-x-5 ">
         <img class="h-10 w-10 object-center animate-rotate-img anim-8s" src="./assets/javascript.png" alt="">
    </div>
</div>

here anim-spin-slow, animate-rotate-img are keyframes for animating the div and img elements, and anim-8s,hw-inner are custom classes for height and width. Inside of inner circle div i added two divs, and then inside those two div a child img element in each, now our inner circle div is ready, after that i added another div inside the parent div which will be our outer circle div with classes

<div class="hw-outer flex justify-between items-center absolute border border-gray-800 rounded-full animate-spin-slow ">
</div>

like from above class here is also a custom class hw-outer for height and width, then i added two divs which are justify-between so that both div are opposite to each other

//First Div
<div class="flex justify-between items-center h-full w-full">
   <div class="bg-white p-1 rounded-full custom-shadow h-10 w-10  transform translate-x-8 translate-y-40 ">
     <img class="h-full w-full object-center animate-rotate-img " src="./assets/flutter.png" alt="">
   </div>
   <div class="bg-white overflow-hidden p-1 rounded-full custom-shadow h-10 w-10 transform -translate-x-8 -translate-y-40 ">
      <img class="h-full w-full object-center animate-rotate-img" src="./assets/svelte.png" alt="">
   </div>
</div>
//Second Div
<div class="absolute flex justify-between items-center h-full w-full">
    <div class="bg-white p-1 rounded-full custom-shadow h-10 w-10  transform translate-x-8 -translate-y-40">
      <img class="h-full w-full object-center animate-rotate-img " src="./assets/tailwindcss.png" alt="">
    </div>
    <div class="bg-white overflow-hidden p-1 rounded-full custom-shadow h-10 w-10 transform -translate-x-8 translate-y-40 ">
       <img class="h-full w-full object-center animate-rotate-img " src="./assets/vuejs.png" alt="">
     </div>
</div>

Note: Second div is absolute, Now open tailwind.config.js file and go to where it says extend, add two keys keyframes and animation.

keyframes: {
'spin-slow': {
'0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' },
},
'rotate-img': {
'0%': { transform: 'rotate(0deg)' },
'25%': { transform: 'rotate(-90deg)' },
'50%': { transform: 'rotate(-180deg)' },
'75%': { transform: 'rotate(-270deg)' },
'100%': { transform: 'rotate(-360deg)' },
}
},
animation: {
'spin-slow': 'spin-slow 13s linear infinite',
'rotate-img': 'rotate-img 13s linear infinite',
}

keyframes and animation are self explanatory where you will define your keyframes and name of the keyframe respectively.

https://youtu.be/6VfRp14ceZg

I hope this was helpful to you.