Animate.cssでアニメーションを作成する方法

投稿日: 2022-04-20 2022-04-20
タグ: css

序章

アニメーションは、アプリケーションのユーザーエクスペリエンスを左右する可能性があります。標準のCSS3を使用してCSSアニメーションを手動で作成できますが、このソリューションにはかなりのメンテナンスと構成が必要です。または、 Animation.css を使用することもできます。これは、「すぐに使用できるクロスブラウザーアニメーションのライブラリ」と呼ばれます。これらの「水を加えるだけ」のアニメーションは、すべてのアニメーションのニーズに対応する高速で効率的なソリューションを提供します。

このチュートリアルでは、Javascriptで小さなtodo-listアプリケーションを作成してから、さまざまな要素をアニメーション化します。 Animate.cssがワークフローをどのように改善できるかを示すために、最初に標準のCSS3を使用して1つの要素をアニメーション化し、次にAnimate.cssを使用するようにコードをリファクタリングします。次に、Animate.cssの広範なライブラリからいくつかのアニメーションを追加します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

nanoやVisualStudioCodeなどの任意のコードエディター
Webブラウザ
HTMLの基礎に慣れている。チュートリアルシリーズHTMLを使用してWebサイトを構築する方法の概要をご覧ください。

ステップ1—ベースアプリケーションの作成

Animate.cssライブラリの使用方法を探る前に、小さなtodo-listアプリケーションを作成しましょう。これにより、スタイルにいくつかの要素が与えられます。次に、標準のCSS3を使用してfadeInアニメーションをコーディングします。

まず、このプロジェクトの新しいフォルダーを作成します。

mkdir animate-css-example

そして、内部をナビゲートします。

cd animate-css-example

ここでは、index.html、app.js、およびstyle.cssの3つのファイルを作成します。

nanoまたはお好みのコードエディタを使用して、最初のファイルindex.htmlを作成します。

nano index.html

次のコンテンツを追加して、CSSファイルとJavascriptファイルへのリンクを含む簡単なHTMLドキュメントを定義します。

./animate-css-example/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS Animations</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div>
    <input type="text" id="todoInput">
    <button onclick="addTodo()">Add Todo</button>
  </div>

  <ul>
  </ul>

  <script src="app.js"></script>
</body>
</html>

ここに、タイトルCSS Animationsを追加し、CSSスタイルシート（次に作成します）にリンクしました。次に、<div>タグ内にいくつかのJavascriptオブジェクトを定義し、3番目のファイルapp.jsにリンクします。

ファイルを保存して閉じます。

次に、エディタでstyle.cssを作成して開きます。

nano style.css

次のコンテンツを追加します。これにより、fadeInアニメーションが定義されます。

./animate-css-example/style.css

.fadeIn {
  animation: fadeIn 1s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

アニメーションの期間を定義し、 @keyframesat-ruleを使用して1つのアニメーションサイクルを構成しました。

ファイルを保存して閉じます。

次に、最終ファイルapp.jsを作成しましょう。

nano app.js

次のコンテンツを追加します。これにより、addTodo関数が定義され、アニメーションが埋め込まれます。

./animate-css-example/app.js

const addTodo = () => {
  const ul = document.getElementsByTagName('ul')[0];
  const input = document.getElementById('todoInput').value;

  if (input.length > 0) {
    const li = document.createElement('li');

    li.classList.add('fadeIn');
    li.appendChild(document.createTextNode(input));

    ul.appendChild(li);

    document.getElementById('todoInput').value = '';
  }
};

Todoアプリには、テキストフィールドとボタンが含まれています。フィールドにテキストを入力してボタンを押すと、新しい要素が作成され、テキストが追加されます。強調表示された行に注意してください。ここでは、新しく作成されたすべての要素にfadeInクラスを追加しました。

ファイルを保存して閉じます。

次に、ブラウザを開いてindex.htmlをロードします。フィールドとボタンが表示されます。フィールドにテキストを入力して、Todoの追加を押します。新しいToDoがフェードインします。

Todo animation

標準のCSS3を使用して、CSSアニメーションを要素に正常に適用しました。それでは、Animate.cssを使用するようにコードをリファクタリングして、生産性と読みやすさをどのように改善できるかを見てみましょう。その後、ライブラリ内のアニメーションをさらにいくつか調べます。

ステップ2—Animate.cssライブラリを使用する

このステップでは、Animate.cssを使用してコードをリファクタリングしてから、いくつかの追加のアニメーションを調べます。

まず、Animate.cssをインストールする必要があります。これは、CDNまたはコンテンツ配信ネットワークを使用して実行できます。

エディターでindex.htmlを再度開きます。

nano index.html

<head>タグ内で、既存の<link>タグをstyle.cssに削除し、強調表示されたコードに置き換えます。

./animate-css-example/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS Animations</title>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>
<body>

  <div>
    <input type="text" id="todoInput">
    <button onclick="addTodo()">Add Todo</button>
  </div>

  <ul>
  </ul>

  <script src="app.js"></script>
</body>
</html>

この<link>タグは、Animate.cssの公式リンクを使用して、ライブラリをページに直接追加します。

注：ノードパッケージマネージャー（npm）またはヤーンパッケージマネージャーを使用してライブラリをインストールすることもできます。

npmを使用してライブラリをインストールするには、次のコマンドを使用します。

npm install animate.css

または、yarnを使用してライブラリをインストールするには、次のコマンドを使用します。

yarn add animate.css

index.htmlを保存して閉じます

次に、Javascriptをリファクタリングして、Animate.cssを使用してfadeInアニメーションを適用しましょう。

Animate.cssライブラリのすべてのクラスは、animate__プレフィックスを使用します。まず、animate__animatedを追加する必要があります。これは、Animate.cssライブラリを使用するように要素に指示します。次に、animate__specific_animationを追加します。利用可能なオプションについては、図書館の公式Webサイトを参照できます。

この例では、animate__animated、次にanimate__fadeInをclassList に追加して、すべての新しいliまたはリスト要素がフェードインするようにします。

コードに次の強調表示された変更を加えます。最終的なファイルは次のようになります。

./animate-css-example/app.js

const addTodo = () => {
  const ul = document.getElementsByTagName('ul')[0];
  const input = document.getElementById('todoInput').value;

  if (input.length > 0) {
    const li = document.createElement('li');

    const animations = [
      'animate__animated',
      'animate__fadeIn'
    ];

    li.classList.add(...animations);
    li.appendChild(document.createTextNode(input));

    ul.appendChild(li);

    document.getElementById('todoInput').value = '';
  }
};

Animate.cssクラスを含む定数を作成し、fadeInを次の行の定数に置き換えました。

ファイルを保存して閉じます。

次に、ブラウザをリロードします。 fadeInスタイルは引き続き表示されますが、Animate.cssライブラリでエフェクトを管理しているのは今だけです。

Animate.cssを使用すると、アニメーションをすばやく追加でき、読みやすいコードを作成できます。これを示すために、<body>タグにいくつかのアニメーションを追加しましょう。

エディタでindex.htmlを開きます。

nano index.html

ユーザーがページを読み込んだときにDOM内のすべての要素を拡大し、そのアニメーションを3回繰り返す必要があると想像してみてください。 animated__animate、animated__zoomIn、およびanimated__repeatクラスをコードに追加するだけです。

次の3つのクラスを<body>タグに追加します。

./animate-css-example/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS Animations</title>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>
<body class="animate__animated animate__zoomIn animate__repeat-3">
  <div>
    <input type="text" id="todoInput">
    <button onclick="addTodo()">Add Todo</button>
  </div>

  <ul>
  </ul>

  <script src="app.js"></script>
</body>
</html>

ファイルを保存して閉じます。

次に、ブラウザにindex.htmlをリロードして、新しいアニメーションを視聴します。

Body element with zoomIn animation

CSSを手動で記述したり、at-rulesを構成したりすることなく、Animate.cssライブラリを使用してCSSアニメーションをHTMLおよびJavascriptに正常に埋め込むことができました。

結論

Animate.cssは、CSSアニメーションを追加するための高速で効率的なソリューションです。これを使用すると、ワークフローをスピードアップし、より読みやすいコードを作成できます。ここから、Animate.cssの公式ウェブページでアニメーションのライブラリ全体を探索できます。

ただし、アニメーションはユーザーエクスペリエンスを向上させるのではなく、すぐに妨げる可能性があることを忘れないでください。 Animate.cssには、ベストプラクティスと Gotchas に関する便利なセクションが含まれているため、アニメーションを最も成功させることができます。アニメーションはまた、特定の医学的問題を抱えている人々にとって有害であることが判明する可能性があります。 Animate.cssは、prefers-reduced-motionメディアクエリをサポートしているため、クライアントは潜在的に有害なアニメーションを無効にできます。

getdocs

13036