Zenn
💫

tailwindcss v4でloading中のアニメーション

に公開
Next.js
React
Tailwind CSS
Tailwind CSS
tech

はじめに

tailwindcssのv.4ではtailwind.config.jsファイルを使用しなくなり、直接cssファイル内に記述するようになったようです。

loading中のアニメーションを作ろうとして実装方法を探すのに少し手間取ったので、記事を残しておきます。

動作環境

node: 22.15.0
next: 15.3.2
react: ^19.0.0
tailwind: ^4

完成したアニメーション

gifアニメーションに変換したら挙動が違ってみえるようになってしまったので参考程度で。

実装コード

下記ではglobals.cssに設定を記述していますが、他のフレームワークやライブラリを使用している場合はTailwindをインポートしているCSSファイルに記述してください。

src/app/globals.css
@import "tailwindcss";

@theme {
  --animate-fade-in-scale: fade-in-scale 1.5s ease-out infinite;
  ;
  @keyframes fade-in-scale {
    0% {
      transform: scale(1);
    }
    20% {
      transform: scale(2);
    }
    40% {
      transform: scale(1);
    }
  }
}

--animate-fade-in-scaleは自分で設定するクラス名なので、クラス名を変えたい場合はanimate-fade-in-scaleを適当な名前に変えて下さい。

src/app/page.tsx
（略）
<div className="flex justify-center items-center">
  <div className="w-2.5 h-2.5 m-0.5 bg-cyan-200 rounded-full animate-fade-in-scale [animation-delay:0s]"></div>
  <div className="w-2.5 h-2.5 m-0.5 bg-cyan-200 rounded-full animate-fade-in-scale [animation-delay:0.2s]"></div>
  <div className="w-2.5 h-2.5 m-0.5 bg-cyan-200 rounded-full animate-fade-in-scale [animation-delay:0.4s]"></div>
</div>
（略）

globals.cssでクラス名をanimate-fade-in-scaleから変えた場合は、animate-fade-in-scaleの個所を自分で設定したクラス名に変更してください。

参考記事

https://tailwindcss.com/blog/tailwindcss-v4
https://zenn.dev/miz_dev/articles/tailwind-css-v4
https://stackoverflow.com/questions/79393540/how-to-use-keyframes-in-tailwind-css-version-4
https://qiita.com/sinoguro/items/edbaacea590f94b9bd76

Discussion