Image Animation Magic in Tailwind CSS v3

Published on Apr 12, 2022

Well, before the start you must use this on tailwindcss version 3. In version 3 it gives you bunch of option to customize your own. Here it's a light turn on & off animation with tailwindcss. So let's check the code.

HTML

<!-- this div for center everything -->
<div class="grid place-items-center h-screen">
  <div id="box" class="relative w-[500px] h-[500px]">
    <span class="
      absolute inset-0  rotate-0
      before:content-[''] before:absolute  before:left-1/2 before:w-[250px] before:h-[300px]
      before:bg-[url('https://i.ibb.co/fFxztL5/lightbulb-1.png')] before:bg-no-repeat
      before:bg-cover before:bg-center before:-translate-x-1/2 before:-translate-y-[100px] before:scale-75
      on-off
    " style="--i:0"></span>

    <span class="
      absolute inset-0  rotate-45
      before:content-[''] before:absolute  before:left-1/2 before:w-[250px] before:h-[300px]
      before:bg-[url('https://i.ibb.co/fFxztL5/lightbulb-1.png')] before:bg-no-repeat
      before:bg-cover before:bg-center before:-translate-x-1/2 before:-translate-y-[100px] before:scale-75
      on-off
    " style="--i:1"></span>

    <span class="
      absolute inset-0  rotate-90
      before:content-[''] before:absolute  before:left-1/2 before:w-[250px] before:h-[300px]
      before:bg-[url('https://i.ibb.co/fFxztL5/lightbulb-1.png')] before:bg-no-repeat
      before:bg-cover before:bg-center before:-translate-x-1/2 before:-translate-y-[100px] before:scale-75
      on-off
    " style="--i:2"></span>

    <span class="
      absolute inset-0  rotate-[135deg]
      before:content-[''] before:absolute before:left-1/2 before:w-[250px] before:h-[300px]
      before:bg-[url('https://i.ibb.co/fFxztL5/lightbulb-1.png')] before:bg-no-repeat
      before:bg-cover before:bg-center before:-translate-x-1/2 before:-translate-y-[100px] before:scale-75
      on-off
    " style="--i:3"></span>

    <span class="
      absolute inset-0  rotate-[180deg]
      before:content-[''] before:absolute before:left-1/2 before:w-[250px] before:h-[300px]
      before:bg-[url('https://i.ibb.co/fFxztL5/lightbulb-1.png')] before:bg-no-repeat
      before:bg-cover before:bg-center before:-translate-x-1/2 before:-translate-y-[100px] before:scale-75
      on-off
    " style="--i:4"></span>

    <span class="
      absolute inset-0  rotate-[225deg]
      before:content-[''] before:absolute before:left-1/2 before:w-[250px] before:h-[300px]
      before:bg-[url('https://i.ibb.co/fFxztL5/lightbulb-1.png')] before:bg-no-repeat
      before:bg-cover before:bg-center before:-translate-x-1/2 before:-translate-y-[100px] before:scale-75
      on-off
    " style="--i:5"></span>

    <span class="
      absolute inset-0  rotate-[270deg]
      before:content-[''] before:absolute before:left-1/2 before:w-[250px] before:h-[300px]
      before:bg-[url('https://i.ibb.co/fFxztL5/lightbulb-1.png')] before:bg-no-repeat
      before:bg-cover before:bg-center before:-translate-x-1/2 before:-translate-y-[100px] before:scale-75
      on-off
    " style="--i:6"></span>

    <span class="
      absolute inset-0 rotate-[315deg]
      before:content-[''] before:absolute before:left-1/2 before:w-[250px] before:h-[300px]
      before:bg-[url('https://i.ibb.co/fFxztL5/lightbulb-1.png')] before:bg-no-repeat
      before:bg-cover before:bg-center before:-translate-x-1/2 before:-translate-y-[100px] before:scale-75
      on-off
    " style="--i:7"></span>
  </div>
</div>

CSS

you must config the custom CSS style in tailwindcss life. You can see .on-off is a custom class

@tailwind base;
@tailwind components;
@tailwind utilities;

.on-off::before {
  animation: animate 2s steps(1) infinite;
  animation-delay: calc(0.1s * var(--i));
}

@keyframes animate {
  0%, 100% {
    background: url('https://i.ibb.co/fFxztL5/lightbulb-1.png');
    background-size: cover;
    background-position: center;
    
  }
  50% {
    background: url('https://i.ibb.co/mC6qSbf/lightbulb.png');
    background-size: cover;
    background-position: center;
  }
}

๐Ÿ“ here the image i upload it will be gone after 6month so you can put your own custom image or image link. The image size 128x128

You can also check the code Tailwind Play ๐Ÿง‘โ€๐Ÿ’ป

CSS