【CSS】アニメーション-@keyframesを用いたアニメーション

タグ :

1 基本的な使用法
2 プロパティの種類について
3 要素が左から右へ移動する簡単なアニメーションの例
4 フェードイン・フェードアウトの例
5 回転アニメーションの例
6 主要なアニメーションプロパティを使ったサンプル
7 HTMLとCSSを使って、テキストが横にスクロールするループアニメーションの例
8 等間隔に見える理由

基本的な使用法

@keyframes ルールを使用して、アニメーションの段階（キーフレーム）を定義します。
キーフレームはアニメーションの開始から終了までの各ポイントを示します。



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

アニメーションを適用したい要素に対して、animation プロパティを使用します。



.animated-element {
 animation: example 3s infinite;
}

プロパティの種類について

animation-name

使用するアニメーションの名前（@keyframes で定義した名前）を指定します。

animation-duration

アニメーションが1回完了するまでの時間を指定します。単位は秒（s）またはミリ秒（ms）です。

animation-timing-function

アニメーションの速度曲線を指定します。例えば、ease、linear、ease-in、ease-out、ease-in-out などがあります。

animation-delay

アニメーションが開始する前の待機時間を指定します。

animation-iteration-count

アニメーションを繰り返す回数を指定します。infinite を使用すると無限に繰り返します。

animation-direction

アニメーションの再生方向を指定します。例えば、normal（通常の方向）、reverse（逆方向）、alternate（交互に再生）、alternate-reverse（逆交互）があります。

animation-fill-mode

アニメーションの実行が終わった後のスタイルを指定します。例えば、none、forwards、backwards、both があります。

animation-play-state

アニメーションの再生状態を制御します。例えば、running（再生中）、paused（一時停止）があります。

要素が左から右へ移動する簡単なアニメーションの例



<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}

.slide-element {
width: 100px;
height: 100px;
background-color: red;
animation: slide 2s ease-in-out infinite;
}
</style>
</head>
<body>
<div class="slide-element"></div>
</body>
</html>

上記の例は、.slide-element クラスに適用された赤い四角形が、2秒間で左から右に移動し、その後無限に繰り返されます。

フェードイン・フェードアウトの例



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

.fade-in {
animation: fadeIn 1s forwards;
}

回転アニメーションの例



@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.rotate {
animation: rotate 2s linear infinite;
}

主要なアニメーションプロパティを使ったサンプル

以下のコードは、四角形の要素が左から右に移動し、色が変わり、回転し、無限に繰り返されるアニメーションになります。



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@keyframes complexAnimation {
0% {
transform: translateX(0) rotate(0deg);
background-color: red;
}
25% {
transform: translateX(50px) rotate(90deg);
background-color: blue;
}
50% {
transform: translateX(100px) rotate(180deg);
background-color: green;
}
75% {
transform: translateX(150px) rotate(270deg);
background-color: yellow;
}
100% {
transform: translateX(200px) rotate(360deg);
background-color: red;
}
}

.animated-element {
width: 100px;
height: 100px;
background-color: red;
animation-name: complexAnimation;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;
}
</style>
</head>
<body>
<div class="animated-element"></div>
</body>
</html>

各プロパティの説明

animation-name: complexAnimation という名前のアニメーションを指定します。これは @keyframes で定義されたアニメーションです。

animation-duration: アニメーションが1回完了するまでの時間を 4s に設定します。

animation-timing-function: アニメーションの速度曲線を ease-in-out に設定します。これにより、アニメーションが開始と終了時にゆっくりになり、中間で速くなります。

animation-delay: アニメーションが開始する前に 1s の遅延を設定します。

animation-iteration-count: アニメーションを無限に繰り返すために infinite を設定します。

animation-direction: アニメーションの再生方向を alternate に設定します。これにより、アニメーションが1サイクルごとに逆方向に再生されます。

animation-fill-mode: アニメーションが終了した後も最後のフレームのスタイルを保持するために forwards を設定します。

animation-play-state: アニメーションの再生状態を running に設定します。これにより、アニメーションがすぐに再生されます。

HTMLとCSSを使って、テキストが横にスクロールするループアニメーションの例

HTML部分



<div class="loop_wrap">
<div>
    SAMPLE&nbsp;SAMPLE&nbsp;SAMPLE&nbsp;SAMPLE&nbsp;SAMPLE&nbsp;SAMPLE&nbsp;
</div>
<div>
    SAMPLE&nbsp;SAMPLE&nbsp;SAMPLE&nbsp;SAMPLE&nbsp;SAMPLE&nbsp;SAMPLE&nbsp;
</div>
</div>

CSS部分



.loop_wrap {
  display: flex;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

display: flex;: 子要素をフレックスボックスレイアウトで並べる設定です。
width: 100%;: 幅を100%に設定しています。
height: 180px;: 高さを180ピクセルに設定しています。
overflow: hidden;: コンテンツがはみ出た場合に隠す設定です。



.loop_wrap div {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 50px;
  overflow: hidden;
}

flex: 0 0 auto;: フレックスアイテムの大きさをコンテンツに基づいて自動的に決定します。
white-space: nowrap;: テキストが改行されないように設定します。
font-size: 50px;: フォントサイズを50ピクセルに設定します。
overflow: hidden;: コンテンツがはみ出た場合に隠す設定です。



.loop_wrap div:nth-child(odd) {
  animation: loop1 50s -25s linear infinite;
}

nth-child(odd): 奇数番目の子要素にスタイルを適用します。
animation: loop 50s -25s linear infinite;: loopアニメーションを50秒の間隔で、-25秒の遅延で、線形に無限に繰り返します。



.loop_wrap div:nth-child(even) {
  animation: loop2 50s linear infinite;
}

nth-child(even): 偶数番目の子要素にスタイルを適用します。
animation: loop2 50s linear infinite;: loop2アニメーションを50秒の間隔で、線形に無限に繰り返します。



@keyframes loop1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
                    
@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

@keyframes loop:

0%: アニメーションの開始時点で、要素を右端（100%）に配置します。
to: アニメーションの終了時点で、要素を左端（-100%）に配置します。
これにより、0%から100%までの間で、要素は右から左へ移動（translateX(100%)からtranslateX(-100%)）します。

@keyframes loop2:

0%: アニメーションの開始時点で、要素を元の位置（0%）に配置します。
to: アニメーションの終了時点で、要素をさらに左に移動させます（-200%）。
これにより、0%から100%までの間で、要素は元の位置からさらに左へ移動（translateX(0)からtranslateX(-200%)）します。