如何使用Tailwind实现页面加载时的文字与图片动画？

实现思路 #

参考你需要的效果，我们可以通过自定义Tailwind动画结合React状态来实现：

• 文字：拆分字符，逐个实现「淡入+上移」的延迟动画
• 图片：实现「右侧滑入+淡入」的入场动画

步骤1：配置Tailwind自定义动画 #

在tailwind.config.js中添加自定义keyframes和动画类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      animation: {
        'fade-up': 'fadeUp 0.6s ease forwards',
        'slide-in-right': 'slideInRight 0.8s ease forwards',
      },
      keyframes: {
        fadeUp: {
          '0%': { opacity: '0', transform: 'translateY(20px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        slideInRight: {
          '0%': { opacity: '0', transform: 'translateX(50px)' },
          '100%': { opacity: '1', transform: 'translateX(0)' },
        },
      },
    },
  },
  plugins: [],
}

步骤2：修改组件代码实现动画 #

将文字拆分为单个字符，给每个字符添加延迟动画；同时用状态控制图片的动画触发（页面加载时激活）：

import { useState, useEffect } from 'react';
import Image from 'next/image';

export default function Home() {
  const [isLoaded, setIsLoaded] = useState(false);
  const headingText = "text here"; // 替换成你的目标文字

  // 页面加载完成后触发动画
  useEffect(() => {
    setIsLoaded(true);
  }, []);

  return (
    <div className="flex flex-row items-center justify-around w-full">
      <div className="flex items-center justify-center flex-col mt-0 mb-auto">
        <h3 className="p-10 font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-slate-950 to-stone-400 text-7xl">
          {/* 拆分文字为单个字符，逐个添加延迟动画 */}
          {headingText.split('').map((char, index) => (
            <span
              key={index}
              className={`opacity-0 animate-fade-up`}
              style={{ animationDelay: `${index * 0.1}s` }}
            >
              {char === ' ' ? '\u00A0' : char} {/* 处理空格，避免动画丢失 */}
            </span>
          ))}
        </h3>
        <span className="p-5 font-normal text-3xl text-neutral-600">
          text here
        </span>
      </div>
      <div>
        <Image
          className={`rounded-3xl shadow-2xl opacity-0 ${isLoaded ? 'animate-slide-in-right' : ''}`}
          src="/main_jpg.jpg"
          width={500}
          height={500}
          alt="主图"
        />
      </div>
    </div>
  );
}

代码说明 #

1. 文字动画：将标题文字拆分为单个字符，每个字符应用fade-up动画，并通过animationDelay设置递增的延迟，实现逐个字符入场的效果。
2. 图片动画：利用useEffect在页面加载完成后切换isLoaded状态，为图片添加slide-in-right动画，实现从右侧滑入并淡入的效果。
3. 自定义动画的参数（时长、缓动函数、位移距离）可以根据你的需求在tailwind.config.js中调整，更贴合参考效果。

内容的提问来源于stack exchange，提问作者COLOMBO72