我如何将滚动动画中的淡入淡出转换到我的 tailwind.config 中

Question

标题。只是想创建一个简单的CSS，仅在滚动动画上淡入。 CSS 是正确的，但在刚刚放入 CSS 文件中时似乎不起作用。我假设顺风编译器做了一些奇怪的事情。

CSS 以及我当前将其添加到配置中的尝试如下。我还将

animate-fade

类添加到我想要的 img 元素中。

已阅读文档并尝试了各种组合，但文档并不适合这些事情。任何帮助表示赞赏。

CSS 对配置使用不同的设置，但这只是因为我正在测试。

使用Vite。

站点.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-*

类仅应用

animation

CSS 属性。因此，您需要单独应用其他属性。例如：

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>

如果您想要

animate-frame

的其他属性，您可以在 CSS 中添加针对

animate-frame

类的附加规则，例如：

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>