Tailwind CSS を使用して高度なカスタム アニメーションをデザインする方法

Tailwind CSS でアニメーション技術をマスターし、ユーザーに忘れられない体験を提供する

オープニング

アニメーションは Web デザインに不可欠な部分となっており、開発者が魅力的でインタラクティブなユーザー エクスペリエンスを作成できるようになります。

Tailwind CSS は、人気があり実用的な CSS フレームワークであり、見事なアニメーション効果を簡単に作成するための強力なツール セットを提供します。

この投稿では、Tailwind CSS を使用して高度なアニメーションのエキサイティングな世界を探索し、プロジェクトを次のレベルに引き上げる素晴らしいトリックをいくつか紹介します。

トランジションとトランスフォーム

Tailwind CSS は、CSS のトランジションと変換を利用するためのユーティリティ クラスのセットを提供します。これらのプロパティを使用すると、あまり手間をかけることなく、スムーズなアニメーションや見事なトランジションを簡単に作成できます。

トランジションとトランスフォームに加えて、Tailwind CSS はキーフレーム アニメーションもサポートしています。キーフレームを使用すると、さまざまな時点での一連のスタイルの変更を指定することで、カスタム アニメーションを定義できます。

さまざまな種類のアニメーションを詳しく見てみましょう。

グラデーションダイナミックテキスト

グラデーション テキストをアニメーション化するには、animate-pulse クラスを含めます。このクラスは要素に脈動アニメーションを適用し、微妙だが目を引く効果を要素に与えます。

<div class="ms-52 my-10 text-5xl font-extrabold">
  <span class="animate-pulse bg-gradient-to-r from-pink-500 via-green-500 to-violet-500 bg-clip-text text-transparent"> Tailwind CSS Animation </span>
</div>

この例では、「グラデーション テキスト」というテキストを含む <span> 要素があります。グラデーション効果を作成するには、text-transparent クラスを使用してテキストを透明にします。最後に、bg-gradient-to-r クラスを使用して、紫から青への水平グラデーションを指定します。

目的: このアニメーションを使用して、詳細を強調表示したり焦点を合わせたりできます。

スケルトン画面（占有エリア）

この例では、Tailwind CSS を使用して、ネットワーク接続がない場合やデータの読み込み中に使用するプレースホルダー コンテンツ領域を作成します :)

<div class="mx-auto mt-10 w-full max-w-sm rounded-md border border-gray-300 p-4">
  <div class="animate-pulse space-x-4">
    <div class="grid">
      <div class="flex">
        <div class="w-10 rounded-full bg-slate-200"></div>
        <div class="ms-4 w-full space-y-6">
          <div class="h-2 rounded bg-slate-200"></div>
          <div class="space-y-3">
            <div class="grid grid-cols-3 gap-4">
              <div class="col-span-2 h-2 rounded bg-slate-200"></div>
              <div class="col-span-1 h-2 rounded bg-slate-200"></div>
            </div>
            <div class="h-2 rounded bg-slate-200"></div>
          </div>
        </div>
      </div>
      <div class="mt-5 space-y-6 py-1">
        <div class="h-2 rounded bg-slate-200"></div>
        <div class="space-y-3">
          <div class="grid grid-cols-3 gap-4">
            <div class="col-span-2 h-2 rounded bg-slate-200"></div>
            <div class="col-span-1 h-2 rounded bg-slate-200"></div>
          </div>
          <div class="h-2 rounded bg-slate-200"></div>
        </div>
        <div class="h-2 rounded bg-slate-200"></div>
      </div>
    </div>
  </div>
</div>

この例では、ネストされた <div> クラスと flex クラスを使用して、読み込みテキストを水平方向と垂直方向の中央に配置します。justify-center クラスと items-center クラスは、コンテンツが親コンテナー内の中央に配置されるようにします。

animate-pulse クラスを適用すると、フットプリント全体に脈動するアニメーションが表示され、ユーザーに動きの錯覚を与え、コンテンツが読み込まれていることを知らせます。

目的: このアニメーションを使用して、要求されたデータがロードされていることを示すことができます。

3. 無限に回転するボール

このアニメーション コードは、境界線と回転を備えた円形要素を作成します。円形要素の内側には、右上隅に小さな円形要素が配置されています。

<div class="my-40 flex">
  <div class="relative mx-auto h-28 w-28 animate-spin rounded-full border-2 p-4">
    <span class="absolute right-5 top-2 flex h-3 w-3">
      <span class="bg-white-500 relative inline-flex h-3 w-3 rounded-full bg-gray-500"> </span>
    </span>
  </div>
</div>

上記のコード スニペットには、クラス my-40 と flex を持つ div 要素があります。この div 内で、animate-spin クラスを使用して、無限スピン アニメーションを持つ円形要素を作成できます。これを使用して、データの読み込みや画像やファイルのアップロードの処理を示すことができます。

目的: このアニメーションを使用して、データの読み込み、画像の読み込み、またはファイルのアップロードのプロセスを示すことができます。

4.二重弾性ラウンド形状

このアニメーション コードは、2 つの円を含むアニメーションを作成します。1 つは跳ねる大きな円で、もう 1 つはその下で回転する小さな円です。アニメーション効果は、読み込み中またはアクティビティのような錯覚を生み出します。

<div class="my-40 flex">
  <div class="relative mx-auto h-10 w-10 animate-bounce">
    <div class="mx-auto h-16 w-16 animate-pulse rounded-full bg-gray-400"></div>
    <span class="absolute flex h-5 w-5 animate-spin">
      <span class="h-4 w-4 rounded-full bg-gray-400"> </span>
    </span>
  </div>
</div>

このアニメーションには、相対的な位置決め、センタリング、サイズ変更、およびバウンスのアニメーション効果を備えた div クラスがあります。2 番目の div 内には、センタリング、サイズ変更、パルスアニメーション効果と灰色の背景色を備えた別の div 要素があります。

親 div 要素に animate-bounce クラスを適用したため、すべての内部要素にデフォルトの弾む効果が適用されます。また、パルス効果を実現するために、より大きな円にanimat-pulse効果を適用しました。

目的: このアニメーションを使用して、ユーザーのアクティビティやデータ読み込みの効果を表示できます。

5. 点線の四角形の回転

このアニメーション コードは、ある種のアクティビティまたは読み込みを表す、回転する角丸四角形で構成されています。長方形のボックスには、視覚的なインパクトを与えるために灰色の点線の輪郭が付いています。

<div class="my-40 flex">
  <div class="mx-auto h-20 w-20 animate-spin rounded-3xl p-6 outline-dotted outline-2 outline-gray-500"></div>
</div>

上記のコード スニペットには、内部の animate-spin にスピン アニメーション効果を適用するクラスが含まれています。Rounded-3xl クラスは、内側の div の角を丸くして、より丸みのある形状を作成します。outline-dotted クラス、outline-2 クラス、およびoutline-gray-500 クラスは、幅 2 単位の点線のグレーのアウトラインを内側の div に適用します。

用途: このアニメーションは、フレームのハイライト、データのロード、ファイルや画像の操作など、さまざまな場所で使用できます。

6. 弾性円

このアニメーション コードは、2 つの跳ねる要素を含む読み込みアニメーションを作成します。最も外側の要素がバウンスし、その中にはネストされた要素もバウンスします。

さらに、他の要素と一緒に移動したり跳ね返ったりする小さなドット要素があります。

<div class="my-40 flex">
  <div class="relative mx-auto h-10 w-10">
    <div class="relative mx-auto ms-5 h-24 w-24 animate-bounce rounded-full border-2">
      <div class="absolute bottom-0 right-10">
        <div class="relative h-40 animate-bounce">
          <div class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-black"></div>
        </div>
      </div>
    </div>
  </div>
</div>

animate-bounce クラスの最も外側の div は、跳ねるアニメーション効果を作成します。

その div 内には、同じくバウンス効果を生成するクラス animate-bounce を持つネストされた div があります。2 番目のネストされた div 内には、黒の背景色 ( bg-black ) と小さなサイズの h-2 および w-2 があります。これにより、跳ねるアニメーションにも参加する小さな黒い点またはインジケーターが作成されます。

目的: このアニメーションを使用して、ファイルまたは画像の処理と読み込みを示すことができます。

7. 矢印の移動

このアニメーション コードは、SVG 要素に移動アニメーション効果を作成します。SVG は緑色の矢印を表しており、アニメーションは矢印の X 位置を変更することで矢印を水平方向に前後に動かします。

<div class="my-40 flex">
  <div class="relative mx-auto mt-5 animate-[propel_5s_infinite]">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" class="h-16 w-16">
      <path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
    </svg>
  </div>
</div>

次に、tailwind.config.js ファイルにキーフレームを追加して、オブジェクトをアニメーション化します。必要に応じて変更してください。

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      keyframes: {
         propel: {
          '0%': { transform: 'translateX(0)' },
          '20%': { transform: 'translateX(25%)' },
          '40%': { transform: 'translateX(-25%)' },
          '60%': { transform: 'translateX(25%)' },
          '100%': { transform: 'translateX(-25%)' },
        },
      },
    },
  },
  plugins: [],
}

最も外側の div には my-40 クラスと flex クラスがあり、垂直方向のスペースを提供し、フレックスボックス レイアウトを有効にします。2 番目の div 内には、XML 名前空間、viewportbox、および class 属性を持つ svg 要素があります。h-16 クラスと w-16 クラスは SVG の高さと幅を設定し、fill="green" 属性は SVG の塗りつぶしの色を緑に設定します。

目的: このアニメーションを使用して、領域をガイドし、焦点を当て、強調表示することができます。

8. 立方体の回転

このアニメーション コードはコンテナを作成し、それに回転アニメーションを適用して、コンテナが継続的に移動または前後に回転するようにします。

コンテナ内には小さな要素があり、これにも反転アニメーションが適用されており、垂直方向に前後に連続的に回転します。

<div class="my-40 flex">
  <div class="relative mx-auto h-28 w-28 animate-[displace_5s_infinite] border border-red-200">
    <div class="h-14 animate-[flip_5s_infinite] bg-red-100"></div>
  </div>
</div>

ここで、tailwind.config.js ファイル内のオブジェクトをアニメーション化するキーフレームを追加します。

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      keyframes: {
        displace: {
          '0%': { transform: 'rotate(0deg)' },
          '20%': { transform: 'rotate(-90deg)' },
          '40%': { transform: 'rotate(0deg)' },
          '60%': { transform: 'rotate(0deg)' },
          '80%': { transform: 'rotate(90deg)' },
          '100%': { transform: 'rotate(0deg)' },
        },
      },
    },
  },
  plugins: [],
}

animate-[displace_5s_infinite] クラスは、要素に「ディスプレイス」アニメーション効果を適用し、要素を継続的に前後に回転させます。

内部 div のクラス h-14 、 animate-[flip_5s_infinite] 、および bg-red-100 は、コンテナ内のコンテンツの高さが 14 単位、背景色が赤で、「反転」アニメーションが適用されていることを表します。垂直にする 連続的に前後に回転させます。

使用法: このアニメーションは、データのロード、ファイルまたは画像の処理、アップロードに使用できます。

他の Tailwind 機能でアニメーションを使用する (ダーク モード)

Tailwind CSS のアニメーション機能は、フレームワークによって提供される他の機能とシームレスに統合できます。たとえば、アニメーションとレスポンシブ デザイン クラスを組み合わせて、さまざまなデバイスにわたって適応性のある魅力的なユーザー エクスペリエンスを作成できます。

Tailwind CSS のダーク モード機能を利用して、ユーザーの好みの配色に基づいてさまざまなアニメーション効果を適用することもできます。動的クラスとユーティリティ バリアントを使用すると、複雑でインタラクティブなアニメーションを作成して Web デザインを強化できます。

仕上げる

上記のデザインのアニメーションは、CSS と Tailwind CSS フレームワークを使用して実現できる多様性と創造性を示しています。これらのサンプルは、回転、跳ね返り、脈動、反転、小刻みなどのさまざまなアニメーション効果を示します。

CSS キーフレームと Tailwind CSS ユーティリティ クラスの力を利用することで、これらのアニメーションはブログや Web サイトにダイナミックで魅力的な要素をもたらします。回転するアイコン、跳ねる形状、小刻みに動くテキストなど、これらのアニメーションはユーザーの注意を引き、視覚体験を向上させることができます。

さらに、Tailwind CSS 構成ファイルでキーフレームをカスタマイズおよび定義できるため、アニメーション機能の微調整と拡張が可能になります。この柔軟性により、開発者は特定の設計ニーズを満たすユニークで魅力的なエフェクトを作成できるようになります。

全体として、アニメーション効果をブログに組み込むと、訪問者に永続的な印象を残す、記憶に残る楽しいユーザー エクスペリエンスを生み出すことができます。ただし、すべてのユーザーにとってシームレスで包括的なブラウジング エクスペリエンスを確保するには、アニメーション効果の使用は控えめにし、パフォーマンスとアクセシビリティへの影響を考慮することが重要です。

記事のスペースが限られているため、今日の内容はここで共有します。記事の最後に、記事の作成は簡単ではないことを思い出していただきたいと思います。私の共有が気に入っていただけましたら、忘れないでください。より多くの人が困っているように、いいねや転送をしてください。同時に、フロントエンドテクノロジーについてもっと知識を得たい場合は、私をフォローすることを歓迎します。あなたのサポートが私にとって共有する最大の動機になります。今後もより多くのコンテンツを出力していきますので、ご期待ください。

ファンの特典

よく使用される 9 つの TailwindCSS カード テンプレートのソース コードを共有します。気に入ったら、ダウンロードして収集してください。