CSSキーフレームアニメーションを作成する方法

CSSを使用すると、開発者はキーフレームアニメーションを使用してWebページに命を吹き込むことができます。

CSSアニメーションは、さまざまなプロパティを使用してHTML要素の初期状態を変更することで実現されます。アニメーション化できる一般的なCSSプロパティには次のものがあります。

  • 高さ
  • ポジション
  • 不透明度

これらの一般的なCSSプロパティは、特定のCSS要素によって操作され、目的の結果を作成します。 Webページでアニメーション化された要素に出くわしたことがある場合は、その要素がキーフレームアニメーションを使用してアニメーション化されている可能性があります。

キーフレーム要素とは何ですか?

keyframes要素は、アクセスできる1つ以上のHTML要素で使用できます。これは、要素の状態の特定のポイントを識別し、この要素が現時点で持つ必要のある外観を指示します。

これは消化するのが大変なように聞こえるかもしれませんが、実際には非常に簡単です。 keyframes要素は非常に単純な構造であり、アニメーションの要件に合わせて簡単に理解および調整できます。

キーフレーム構造の例


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

緑の長方形のボタンを青い丸いボタンに変えてアニメーション化するとします。

上記のfromセクションのパラメーター内に、要素を緑色の長方形のボタンのように見せるために必要なすべてのスタイリングを配置する必要があります。次に、 toセクションに、このボタンを青色の丸いボタンに変換するためのすべてのスタイリング要件を配置します。 。

あなたが考えているなら、「それはアニメーションのように聞こえすぎない」。これは、このプロセス全体の主要なコンポーネントがまだ導入されていないためです—このコンポーネントはアニメーションプロパティです。

アニメーションプロパティ

アニメーションプロパティには、さまざまなサブプロパティのセットがあります。これらは、上記のキーフレーム構造と組み合わせて使用​​され、目的のHTML要素をアニメーション化します。

ただし、プロジェクトでアニメーションを実現するには、これらのサブプロパティのうち5つと、それらに関連付けられている値を知っているだけで済みます。これらのプロパティは次のように知られています。

  • アニメーション名
  • アニメーション-持続時間
  • アニメーションタイミング機能
  • アニメーション-遅延
  • アニメーション-反復-カウント

Webページでのアニメーションの使用

上記のシナリオを使用して、目標はアニメーションボタンを作成することです。

ボタンアニメーションの例


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title>
<style>
/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}
</style>
</head>
<body>
<!-- placing the button element with the text "Click!" on the web page -->
<button class="btn">Click!</button>
</body>
</html>

上記のコードのアニメーションセクションには、前述の5つのサブプロパティが含まれています。各プロパティには非常に異なる機能があり、それらが一緒になって、ターゲットに設定されたHTML要素をアニメーション化します。

関連: CSSセレクターを使用してWebページの一部をターゲットにする方法

Animation-nameプロパティ

このプロパティは、リストで最も重要なプロパティの1つです。 Animation -nameプロパティがないと、 keyframes要素貼り付ける識別子がなく、パラメーター内のすべてのコードが役に立たなくなります。

他のサブプロパティの1つまたは2つを含めるのを忘れた場合でも、かなりまともなアニメーションが表示される可能性があります。ただし、 animation-nameプロパティを忘れた場合、アニメーションはありません。

Animation-durationプロパティ

このプロパティは、アニメーション化された要素がある状態から次の状態に移行するときにかかる時間を定義するために使用されます。

上記の例では、 animation-durationプロパティが5秒(5s)に設定されているため、緑色の長方形のボタンは、完全に青色の丸いボタンになるまでに合計5秒かかります。

Animation-delayプロパティ

このプロパティは、1つの理由から重要です。一部のWebページは、完全にロードされるまでに数秒かかる場合があります(いくつかの異なる要因のため)。そのため、 animation-delayプロパティは、Webページの読み込みに時間がかかる場合に備えて、アニメーションがすぐに開始されないようにします。

上記の例では、 animation-delayプロパティが4sに設定されています。これは、Webページにアクセスしてから4秒後までアニメーションが開始されないことを意味します(アニメーションが開始する前にWebページをロードするのに十分な時間を与えます)。

Animation-iteration-countプロパティ

このプロパティは、アニメーション化された要素が1つの状態から次の状態に遷移する回数を示します。 Animation-iteration-countプロパティは、単語と数値の値を取ります。数値は1以上の値にすることができますが、単語の値は通常「無限」です。

上記の例では、 animation-iteration-count値は「 infinite 」に設定されています。これは、Webページがアップしている限り、buttonプロパティが1つの状態から次の状態に継続的にアニメーション化されることを意味します。

Animation-timing-functionプロパティ

このプロパティは、ある状態から次の状態に遷移するときのアニメーション要素の動きを指示します。通常、 animation-timing-functionプロパティには、3つのイーズ値のいずれかが割り当てられます。

  • イーズイン
  • イーズアウト
  • イーズインアウト

イーズインアウト値は上記で使用されています。これにより、アニメーションが1つの状態から別の状態にゆっくりと移行します。ボタンが緑色の長方形から青色の円に変化するときにゆっくりとした遷移​​を作成することが目標である場合は、イーズイン値を使用します。反対方向へのゆっくりとした遷移​​のみが必要な場合は、イーズアウト値を使用します

コードの削減

ほとんどの場合、プログラムの長さを短くすることは実用的なアプローチと見なされます。これは主に、コード行が少ないため、プログラムでエラーが見過ごされる可能性が低くなるためです。

上記のコードは4行減らすことができます。これは、各サブプロパティを明示的に識別せずに、animationプロパティを使用するだけで実現できます。

ボタンアニメーションの例のコードを減らす


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title>
<style>
/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}
</style>
</head>
<body>
<!-- placing the button element with the text "Click!" on the web page --
<button class="btn">Click!</button>
</body>
</html>

上記のコードでは、1行のコードを使用して、以前は5行のコードを使用したのと同じ結果を達成しています。これにより、よりクリーンなコード生成できます

今、あなたはあなたのウェブページをアニメーション化することができます

これで、Webページ上のHTML要素をアニメーション化するために必要なスキルが身に付きました。また、CSSアニメーションを可能にするために、animationプロパティとkeyframes要素がどのように連携するかを理解する必要があります。

広範なサブプロパティのリストを含むアニメーションプロパティは、間違いなく興味深いものです。それでも、役立つと思われるCSSプロパティは他にもたくさんあります。

画像クレジット:Josh Riemer / Unsplash