tailwind 커스텀 애니메이션

적용 방법

1. tailwind.confing.ts에 keyframes, animation 정의

import { transform } from "next/dist/build/swc/generated-native";
import type { Config } from "tailwindcss";

export default {
  darkMode: ["class"],
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "home-img": "url('/images/home-img.jpg')",
      },
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        
        ...., // 기본적으로 적용된 스타일들 생략
        
      keyframes: {
        appear: {
          from: {
            opacity: "0",
          },
          to: {
            opacity: "1",
          },
        },
        slide: {
          from: {
            transform: "translateX(-100%)",
          },
          to: {
            transform: "translateX(0%)",
          },
        },
      },
      animation: {
        appear: "appear .65s linear",
        slide: "slide 750ms ease-in-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config;

• animation을 관련 부분만 따로 보면
  css에서 keyframes로 애니메이션을 정의하고
  animation 속성으로 적용하는 것과 같은 방식이다.

// 애니메이션 정의

keyframes: { 
    appear: { --------------> 이름은 본인이 정하면 된다.
      from: { --------------> from/to 또는 0%/25%/50%...로 설정 가능하다.
        opacity: "0",
      },
      to: {
        opacity: "1",
      },
    },
    slide: {
      from: {
        transform: "translateX(-100%)",
      },
      to: {
        transform: "translateX(0%)",
      },
    },
  },
  animation: { -------------> animation 설정
  	// 위에서 정의한 animation 이름에 
    appear: "appear .65s linear",  // duration, delay, timing-function 등을 설정할 수 있다
    slide: "slide 750ms ease-in-out",
  },

사용 시

• className에 "animate-정의한 애니메이션 이름" 으로 요소에 animation을 적용.

import React from "react";

export default async function Template({
  children,
}: {
  children: React.ReactNode;
}) {
  return <div className="animate-appear">{children}</div>; // 애니메이션 적용
}