〈PR〉プロが選ぶ!2023年最新!おすすめプログラミングスクール比較ガイド

【簡単】CSSのkeyframesを使って理想のアニメーションの動きを実装してみよう!

サイトの一部分にアニメーションを作成したい時は
CSS keyframesとanimationプロパティを
使用して実装します。

この記事では、CSS keyframesの使い方、アニメーションの作成方法、特定の要素をアニメーション化する方法を併せてご紹介!

この記事を読むと
  • CSS keyframesの使い方
  • CSS keyframesとanimationプロパティを使用してアニメーションを実装する方法
  • CSS keyframesとJavaScriptを組み合わせて動的なアニメーションを作成する方法

CSS keyframesとanimationの使い方の構成

CSS keyframesとanimationを使用するには、次の手順を実行します。

@keyframesルールを定義します。これにより、アニメーションの変化を定義します。
animationプロパティを使用して、アニメーションを適用したい要素に適用します。このプロパティには、アニメーションの名前、開始/終了時間、リピートなどのオプションを指定します。
アニメーションを適用したい要素に対して、animationプロパティを使用して、アニメーションを適用します。
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.example-class{
animation: example 5s linear infinite;
}

上記の例で、exampleという名前のアニメーションは5秒かけて、背景色を赤から黄色に変更する。
.example-classに対してこのアニメーションを適用する。

CSS keyframesについての基礎要素

CSSの@keyframesルールは、アニメーションを作成するために使用されます。@keyframesルールは、アニメーションの最初と最後の状態を定義し、その間にある状態を指定することで、アニメーションを定義します。各状態は、時間の経過に応じて変化します。

@keyframesルールは、次のように記述されます。

@keyframes animationName {
  from {
    //initial state
  }
  to {
    //final state
  }
}

また、各状態を指定するために、プロパティとその値を指定します。

@keyframes animationName {
  0% {
    //initial state
  }
  100% {
    //final state
  }
}

CSSアニメーションを適用するには、animationプロパティを使用します。

selector {
  animation: animationName 5s;
}

ここで、animationNameは@keyframesルールで定義したアニメーションの名前で、5sはアニメーションの時間です。

CSS animationの使い方の例

CSS の animation プロパティは、HTML エレメントにアニメーションを適用するために使用します。使用方法は次のようになります。

<div class="animated-element">Animated Element</div>
.animated-element {
  animation: myAnimation 3s ease-in-out;
}

@keyframes myAnimation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

この例では、animation プロパティを使用して、class “animated-element” の HTML エレメントにアニメーションを適用しています。アニメーションの名前は “myAnimation”、アニメーションの時間は 3 秒、イージングは “ease-in-out” です。@keyframes で定義されたアニメーションは、HTML エレメントが X 軸方向に 100px 移動します。

CSS keyframeとanimationを使用したアニメーションのチュートリアル

CSSキーフレームとアニメーションを使用してアニメーションを作成する方法についてです。

アニメーションで使用するCSSプロパティとそれらの値を指定して、キーフレームを定義します。例えば、要素をフェードイン・アウトさせる簡単なアニメーションを作成するために、次のようなキーフレームを使用できます。

@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

ここで、animationの値は、’animation-name duration timing-function’ の順番で指定することで、アニメーション名、持続時間、タイミング関数を設定します

HTMLにおいて、上記のCSSを適用するためのクラスを指定します。

<div class="fade-element">This element will fade in and out</div>

上記のようにすることで、’fade-element’というクラスが持っているanimationプロパティが適用され、3秒間かけてfadeInOutアニメーションが実行されます。

CSS keyframesを使用して特定の要素をアニメーション化する方法

アニメーションで使用するCSSプロパティとそれらの値を指定して、キーフレームを定義します。例えば、特定の要素を左から右に移動させるアニメーションを作成するために、次のようなキーフレームを使用できます。

CSS keyframesを使用して特定の要素をアニメーション化する方法についてです。

@keyframes moveRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

アニメーションを適用する要素に対して、animationプロパティを使用してアニメーションを設定します。例えば、上記のmoveRightアニメーションを適用するには、次のように記述します。

.move-element {
  animation: moveRight 2s linear;
}

ここで、animationの値は、’animation-name duration timing-function’ の順番で指定することで、アニメーション名、持続時間、タイミング関数を設定します。

HTMLにおいて、上記のCSSを適用するためのクラスを指定します。

<div class="move-element">This element will move from left to right</div>

上記のようにすることで、’move-element’というクラスが持っているanimationプロパティが適用され、2秒間かけてmoveRightアニメーションが実行され、要素が左から右に移動します。
ちなみに、animation-iteration-countプロパティを使用することで、アニメーションを何回繰り返すかを指定することもできます。
例えば、3回繰り返す場合は、animation-iteration-count: 3;と記述します。

CSS keyframesを使用して、複数の要素を一度にアニメーション化する方法

CSS keyframesを使用して、複数の要素を一度にアニメーション化する方法は、以下のようになります。

HTML要素にアニメーションを適用したいクラス名を付けます。
<div class="animated-element">Animated Element 1</div>
<div class="animated-element">Animated Element 2</div>
<div class="animated-element">Animated Element 3</div>
CSSでアニメーションを定義します。
.animated-element {
  animation: myAnimation 5s infinite;
}
@keyframesルールを使用して、アニメーションのスタイルを定義します。
@keyframes myAnimation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

この例では、.animated-elementクラスの要素が5秒間、無限に水平方向に100px移動するようにアニメーションされます。
複数の要素を一度にアニメーション化するためには、同じクラス名を持つ要素に対して同じアニメーションを適用するだけです。

注意

一度にアニメーション化される要素が多いと、アニメーション効果が混ざり合って見えにくくなる可能性があります。
その場合は、要素ごとにアニメーションを異なる時間やスタイルで適用することもできます。

.animated-element:nth-child(1) {
  animation: myAnimation 5s infinite;
}
.animated-element:nth-child(2) {
  animation: myAnimation 2s infinite;
}
.animated-element:nth-child(3) {
  animation: myAnimation 8s infinite;
}

CSS keyframesとJavaScriptを組み合わせて動的なアニメーションを作成する方法

CSS keyframesとJavaScriptを組み合わせて、動的なアニメーションを作成する方法は、以下のようになります。

HTML要素にアニメーションを適用したいクラス名を付けます。
<div id="animated-element">Animated Element</div>
CSSでアニメーションを定義します。
#animated-element {
  animation: myAnimation 5s infinite;
}
@keyframesルールを使用して、アニメーションのスタイルを定義します。
@keyframes myAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
JavaScriptでアニメーションを操作します。
var element = document.getElementById("animated-element");

// アニメーションを開始
element.style.animationPlayState = "running";

// アニメーションを停止
element.style.animationPlayState = "paused";

この例では、JavaScriptでanimationPlayStateプロパティを変更し、アニメーションを開始または停止しています。

JavaScriptを使用することで、アニメーションの開始・停止、アニメーションの時間やスタイルなど、動的に操作することができます。

JavaScriptを使用したアニメーション制御について

JavaScriptを使用したアニメーション制御には、animationプロパティを使用したもののほかにも、 requestAnimationFrameなどがあります。
これらの方法を使用することで、より高度なアニメーションを作成することができます。

今回は、CSS keyframesとanimationプロバティ
の実装を説明しました。
アニメーションを実装するのに当たって必要不可欠なので、この機会に覚えて下さい。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です