カスタム風アニメーションを作成する

執筆Nitin Ranganath ✏️
Tailwind CSS その採用で途方もない成長を示しているユーティリティの最初のCSSフレームワークです.それはCSSの1行を書くことなく、現代のウェブサイトを構築することができますが、ウェブサイトのスタイリングは、肯定的なユーザー体験を提供するの一部です.
アニメーションを介して意味のある相互作用の工芸品は、あまりにも、訪問者の注目をキャプチャする重要な役割を果たし、彼らは次のレベルにあなたのウェブサイトを取ることができます.このポストでは、どのようにToowind CSSでCSSアニメーションを使用して、それが付属の組み込みアニメーションを探索し、その余分な才能のためのカスタムアニメーションを作成する方法を学びます.

を使用して組み込みのCSSアニメーション

CSS animations CSSモジュールですanimate the values of CSS properties キーフレームを通して.これらのキーフレームアニメーションの性質は、そのような持続時間、緩和機能、方向、遅延などのプロパティを微調整することによって変更することができます.
他のCSSのプロパティとモジュールと同様に、Toowind CSSもCSSアニメーション用のユーティリティクラスを出荷します.デフォルトでは、4つの基本的なアニメーションが付属して:スピン、パルス、ping、およびバウンス.
これらのユーティリティクラスはanimate などのキーワードanimate-spin or animate-pulse . しましょうanimate-spin 効用としての効用
このユーティリティクラスは、リニア要素と無限のスピンアニメーションをHTML要素に追加するために使用されます.これは、フォームのボタンで見つけるかもしれないものなどのロードインジケータに特に便利です.
ここでは、どのように無限のスピンアニメーションをSVGに追加する方法を示してコードスニペットです.あなたのアプリケーションの状態に応じて、このユーティリティクラスを切り替えることができます.

<button type="button" class="bg-indigo-500 ..." disabled>
  <svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Loading...
</button>

そのような場合、アニメーションを使用すると、ユーザーは自分の行動が承認され、適切なレスポンスが引き起こされていることを理解するのに役立ちます.機能のほかに、アニメーションも美学のために使用することができます.
他の内蔵アニメーションをチェックアウトするにはTailwind CSS documentation . アニメーションのためのビルトインCSSを使用することは、マークアップにリンクされる専用のスタイルシートをすでに持っているプロジェクトのために理想的で、依存性としてテールウインドCSSを必要としません.

カスタム風アニメーションを作成する

つの一般的なユースケースでは、4つのビルトインCSSアニメーションが十分であるかもしれませんが、これらだけに制限されたくないかもしれません.アニメーションは非常にプロジェクト固有であり、おそらくあなたが代わりにカスタムアニメーションを使用します.
ありがたいことに、新しいスタイルシートを作成し、あなたのアプリケーションに新しいアニメーションを追加するだけであなたのマークアップにリンクする必要はありません.代わりに、アニメーションのキーフレームを定義し、新しいアニメーションを作成するには、テーマの構成を拡張します.

私たちは、上記のようなカスタム手を振っている手アニメーションを作成して、Trewind CSSでそれを使用したいと思います.方法はこちら.

Cookieの設定ファイルに@ keyframeを追加する

まず、アニメーションのキーフレーム規則を定義する必要があります.The @keyframes CSSの規則は、アニメーションの初期、中間、最終ウェイポイントの間の要素のCSSプロパティの値を定義するために使用されます.これを通じて、アニメーションのさまざまな段階で複数の異なるスタイルを持つことができます.
あなたがキーフレームに新しいか、その構文に慣れていないならば、check out this blog post .
プレーンCSSでは、このアニメーションのキーフレームは次のようになります.

@keyframes wave {
  0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) }
  100% { transform: rotate( 0.0deg) }
}

開放するtailwind.config.js プロジェクトディレクトリのルート内のファイルを空にしますkeyframes オブジェクトtheme.extend . さて、この中にkeyframes オブジェクト、我々の新しい波アニメーションを加えて、その振舞いを定義しましょう.

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      keyframes: {
        wave: {
          '0%': { transform: 'rotate(0.0deg)' },
          '10%': { transform: 'rotate(14deg)' },
          '20%': { transform: 'rotate(-8deg)' },
          '30%': { transform: 'rotate(14deg)' },
          '40%': { transform: 'rotate(-4deg)' },
          '50%': { transform: 'rotate(10.0deg)' },
          '60%': { transform: 'rotate(0.0deg)' },
          '100%': { transform: 'rotate(0.0deg)' },
        },
      },
    },
  },
  plugins: [],
}

The content Cookieの設定ファイルの配列は、使用しているフロントエンドフレームワークやライブラリによって異なります.しかし、上記のスニペットで焦点を合わせる主なものはkeyframes オブジェクト.

テーマの拡張

今、我々は我々のテーマオブジェクトにキーフレーム規則を加えましたtailwind.config.js , このルールを使用してカスタムアニメーションを追加しましょう.我々は、アニメーションの継続時間、遅延、反復、タイミング関数をカスタマイズすることができます.
アニメーションを各サイクルで直線的に2秒間遷移させ、無限にアニメーション化し続けると仮定しましょう.以下に、CSSアニメーションの短縮プロパティがどのように見えますか

animation: wave 2s linear infinite;

Wave は以前に定義したキーフレーム規則の名前です.2s このアニメーションが1サイクルで2秒間遷移するべきであることを示すのに使用されますlinear は、緩和関数が線形であることを示すために使用され、infinite それは永久にアニメーションを維持します.
この動画を入れましょうtailwind.config.js にtheme.extend.animation 対象:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      keyframes: {
        wave: {
          '0%': { transform: 'rotate(0.0deg)' },
          '10%': { transform: 'rotate(14deg)' },
          '20%': { transform: 'rotate(-8deg)' },
          '30%': { transform: 'rotate(14deg)' },
          '40%': { transform: 'rotate(-4deg)' },
          '50%': { transform: 'rotate(10.0deg)' },
          '60%': { transform: 'rotate(0.0deg)' },
          '100%': { transform: 'rotate(0.0deg)' },
        },
      },
      animation: {
        'waving-hand': 'wave 2s linear infinite',
      },
    },
  },
  plugins: [],
}

ユーティリティクラスは、animation オブジェクト.使ったからwaving-hand このアニメーションのキーとして、我々は追加する必要がありますanimate-waving-hand このようにマークアップでアニメーション化したい要素には、次のようにします.

<h1 class="flex font-semibold text-purple-600">
  Hello <span class="animate-waving-hand">👋🏻</span>, LogRocket Blog
</h1>

Voila!あなたはうまくあなたのTailwind CSSアプリのカスタムアニメーションを作成しました.より多くのアニメーションを追加するには、同じ手順に従いますtheme.extend.keyframes 次に、アニメーションを追加しますtheme.extend.animation .

Toowind CSSにおけるワンオフカスタムアニメーションのための任意の値の使用

Trewind風CSSの設定ファイル内のアニメーションを定義している間に再利用可能なアニメーションのための理想的な方法ですが、あなたは一度だけあなたの全体のアプリで使用される1つのオフアニメーションのためにそれをしたくないかもしれません.
確かに、内部の別のアニメーションを定義することができますtheme.extend.animation , しかし、Cookieを提供するbetter way to tackle such scenarios through arbitrary values . これらを使用するには、アニメーションプロパティをアンダースコアで区切って、animate マークアップのキーワードは次のようになります.

animate-[animationName_easingFunction_durationInSeconds_iterationsCount_delayInSeconds_direction]

あなたが同じを使いたいとしましょうwave キーフレームのルールが、代わりに2つの秒ごとに時間のために線形と無限にアニメーション化の代わりに、それをease-in-out タイミング機能.
したがって、新しいアニメーションでは、ユーティリティクラスは次のようになります.

<h1 class="flex font-semibold text-emerald-500">
  Hello <span class="animate-[wave_5s_ease-in-out_2]">👋🏻</span>, arbitrary values
</h1>
<p class="text-center text-xs text-gray-400">
  Wave animation, 5 seconds duration, ease-in-out, 2 iterations
</p>
<pre className="text-center text-xs text-gray-500">
  animate-[wave_5s_ease-in-out_2]

結論

Cookieのテーマ設定機能のおかげで、カスタムの色、間隔、またはブレークポイントを追加するだけでなく、任意の妥協やスタイルシートなしでカスタムアニメーションにもデフォルトのテーマを拡張することができます.これは、Tarwind CSSが開発者のためのそのような人気の選択である理由です.

あなたのフロントエンドは、ユーザーのCPUをhoggingですか？

Webフロントエンドがますます複雑になるにつれて、リソース貪欲な特徴はブラウザからますます要求する.クライアント側のCPU使用状況、メモリ使用量、およびすべてのユーザーの生産を監視し追跡することに興味がある場合.try LogRocket .
https://logrocket.com/signup/
LogRocket ウェブやモバイルアプリケーションのDVRのように、あなたのWebアプリケーションやサイトで発生するすべての記録.問題が発生する理由を推測する代わりに、集計することができますし、キーフロントエンドのパフォーマンスの測定については、アプリケーションの状態と一緒に再生ユーザーセッション、ログネットワークの要求を報告し、自動的にすべてのエラーを表面.
Webアプリケーションのデバッグ方法Start monitoring for free .