how would I translate this fade in on scroll animation into my tailwind.config

Question

title. Just trying to create a simple, CSS only fade in on scroll animation. The CSS is correct but doesn't seem to function when just placed in the CSS file. I'm assuming the tailwind compliler does some weirdness with it.

The CSS is below along with my current attempt at adding it to the config. I've also added the animate-fade class to the img elements I want.

Have read the docs and tried various combinations but the docs aren't great for these things. Any help appreciated.

The css is using different settings to the config but that's just because i'm testing.

Using Vite.

site.css:

.fade {
    scale: 0.7;
    opacity: 0;
    animation: fade linear forwards;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: 200px;
}

@keyframes fade {
    to {
        scale: 1;
        opacity: 1;
    }
}

tailwind.config.js

    theme: {
        extend: {
            keyframes: {
                fade: {
                    from: { scale: "0.6", opacity: "0.6" },
                    to: { scale: "1", opacity: "1" },
                },
            },
            animation: {
                fade: "fade linear forwards",
            },....

Answer 1

animate-* classes only apply the animation CSS property. So you'd need to apply the other properties separately. For example:

tailwind.config = {
  theme: {
    extend: {
      keyframes: {
        fade: {
          to: {
            scale: '1',
            opacity: '1',
          },
        },
      },
      animation: {
        fade: 'fade linear forwards',
      },
    },
  },
};

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class="pt-[150vh]">
  <div class="h-96 bg-red-200 animate-fade [scale:0.7] opacity-0 [animation-timeline:view()] [animation-range-start:cover] [animation-range-end:200px]"></div>
</div>

If you wanted the other properties with animate-frame, you could add an additional rule in your CSS that targets the animate-frame class like:

tailwind.config = {
  theme: {
    extend: {
      keyframes: {
        fade: {
          to: {
            scale: '1',
            opacity: '1',
          },
        },
      },
      animation: {
        fade: 'fade linear forwards',
      },
    },
  },
};

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<style type="text/tailwindcss">
  @layer utilities {
    .animate-fade {
      scale: 0.7;
      opacity: 0;
      animation-timeline: view();
      animation-range-start: cover;
      animation-range-end: 200px;
    }
  }
</style>

<div class="pt-[150vh]">
  <div class="h-96 bg-red-200 animate-fade"></div>
</div>