CSS/JavaScriptアニメーション

transition

• 始点・終点２点で設定できる、単純なアニメーションを実現

↓ホバー時に文字色を変えるアニメーション

h1{
    /* 始点のカラー */
    color: #f88;
    /* 始点に、何秒かけて終点に向かうか記載する */
    transition: 1s;
}

h1:hover{
    /* 終点のカラー */
    color: #fc2;
}

↓ホバー時に文字の大きさと背景色を変えるアニメーション

h1 {
  /* 始点のカラー・文字の大きさ */
  background: #f66;
  font-size: 1rem;
  /* 始点に、何秒かけて終点に向かうかをプロパティ名で記載する */
  transition: background 1s, font-size 2s;
}

h1:hover {
  /* 終点のカラー・文字の大きさ */
  background: #fc2;
  font-size: 2rem;
}

一括指定構文

transition: transition-property transition-duration イージング関数 ransition-delay;

/* 記載例 */
 transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;

省略したら初期値が適用されます。

項目	説明	指定値
transition-property	アニメーションを適用するプロパティ名。	初期値：all、プロパティ名：CSSのプロパティ名、none：適用させない
transition-duration	アニメーションの実行にかかる時間。	初期値：0、数値s：秒、数値ms：ミリ秒
イージング関数	アニメーションの動き方	初期値：ease ※詳しくは下記
ransition-delay	アニメーションが始まるまでの待ち時間	初期値：0、数値s：秒、数値ms：ミリ秒

イージング関数

値	説明
ease	最初ゆっくり → 速く → 最後ゆっくり（規定値）
linear	一定のスピードで変化 （回転する部品）
ease-in	最初ゆっくり、だんだん速く
ease-out	動きはじめは早く→最後ゆっくり（小さなUI部品）
ease-in-out	最初と最後がかなりゆっくり （大きなUI部品）
steps()	ステップごとに変化

transition関連プロパティ

transform-origin

• 変形（transform）の「中心点」を決めるプロパティ
  • 要素を回転（rotate）させたり、拡大（scale）したりするとき、「どこを軸に変形するのか？」を決める
  • translateは「位置をずらす」変形なので、回転や拡大のような中心点の影響は受けない

transform-origin: top left;

水平方向（X軸）	垂直方向（Y軸）	意味
left	top	左上
left	center	左中央
left	bottom	左下
center	top	上中央
center	center	中央（デフォルト）
center	bottom	下中央
right	top	右上
right	center	右中央
right	bottom	右下
50%	50%	中央（同じくデフォルト）
100%	0%	右上（数値指定）
20px	80px	任意の位置（px指定）

X軸とY軸の方向

アニメーションで基準になる軸です。

transform

要素の形や位置、向きを動的に「変形」させるCSSプロパティ

構文

transform: 変形関数1 変形関数2 変形関数3 ...;

変形関数	書き方	効果
移動（平行移動）	translateX(50px) / translateY(-20px) / translate(40px, -40px)	要素を横（X）・縦（Y）に動かす
拡大・縮小	scale(1.5) / scaleX(2)	要素のサイズを変える（1が等倍）
回転	rotate(45deg)	指定した角度だけ回転させる（右回り）
傾ける（斜めにする）	skewX(30deg) / skewY(15deg)	要素を傾ける

translate

• 横（X）と縦（Y）に動かす
  • 要素が今ある位置から左上隅を基準に動かします。

transform: translate(100px, 100px);

• 横（X）に動かす
  • 要素が 右に100px 動きます。
  • マイナス値にすると左へ動きます！

transform: translateX(100px);

• 縦（Y）に動かす
  • 要素が 下に100px 動きます。
  • マイナス値にすると上に動きます！

transform: translateY(100px);

translateを使用したレスポンシブ対応

• transform: translate(-50%, -50%)は、CSSで要素の位置を調整するテクニックの一つです。
• これは主に、要素を親要素（または基準となる場所）に対して正確に中央に配置したいときによく使われます。
• translate()は、要素自体を要素自身のサイズを基準にして移動させるものです。

具体的な効果

translate(-50%, -50%)を他のCSSプロパティ（特に position: absolute; top: 50%; left: 50%;）と組み合わせることで、以下の効果が生まれます。

• top: 50%; left: 50%:
  要素の「左上隅」を、親要素の真ん中（上下左右50%の位置）に移動させます。
• transform: translate(-50%, -50%);:
  その後、要素自身の幅の半分だけ左へ、高さの半分だけ上へ、要素自体をずらします。

これにより、要素の「左上隅」が親要素の中心にくるのではなく、要素自身の中心が親要素の中心にぴったりと揃うようになります。

変数の組み合わせ

• 下記のように、変数を組み合わせることは可能
• 右→左に実行される

  transform: translateX(100px) rotate(45deg);
  transform: rotate(45deg) translateX(100px);

transform: translateX(100px) rotate(45deg);の場合

• 45度回転した後に右に100px動く

transform: rotate(45deg) translateX(100px);の場合

• 右に100px動く
• translateは中心点が変わらないので、中心点が変わらないまま（中心点は初期値のまま）45度回転する

animation

transitionより、複雑なアニメーションを実装することができる。

transitionと異なる点

• 開始から終了までの間に複数経過地点を設け、それぞれに異なるスタイルを適用できる
  • この経過地点をキーフレームと呼ぶ
• アニメーションは自動再生されるため、:hoverなどのトリガーは必要ない

 /* アニメーション定義*/
@keyframes 任意のキーフレーム名
 0% {
 /* アニメーション開始点*/
    プロパティ:値;
 },
 50% {
    プロパティ:値;
 },
 /* アニメーション終了点*/
 100% {
    プロパティ:値;
 }

 /* アニメーションを使用するときの定義
 */
 セレクター{
    animation:任意のキーフレーム名;
 }

↓使用例

.new{
    background: #0bd;
    height: 300px;
    animation: gradient-box 10s;
}

@keyframes gradient-box{
    0%{
        background: #fc4;
    },
    50%{
        background: #4ca;
    },
    100%{
        background: #0bd;
    }
}

一括指定構文

animation: 
1.animation-name 
2.animation-duration
3.animation-timing-function 
4.animation-delay
5.animation-iteration-count 
6.animation-direction
7.animation-fill-mode
8.animation-play-state

1.animation-name

keyframsで定義したキーフレーム名

2.animation-duration

1回のアニメーションにかかる所要時間。
　※ s（秒） ms（ミリ秒）

3.animation-timing-function

アニメーションの速度やタイミング。
設定できる値はtrasitionのいーじんぐ関数と同じ。

4.animation-deley

アニメーションが始まるまでの待ち時間。マイナスの値も使えて、その場合はすでにアニメーションが途中から始まる感じになる。
　※ s（秒） ms（ミリ秒）

5.animation-iteration-count

アニメーションを何回繰り返すかを指定します。
infiniteを指定すると、永遠にぐるぐる繰り返します！

値	意味	例
1（初期値）	1回だけアニメーションをする	animation-iteration-count: 1;
2, 3, 5 など	指定した回数だけ繰り返す	animation-iteration-count: 3;（3回繰り返す）
infinite	無限に繰り返す（止まらない！）	animation-iteration-count: infinite;
小数（※少し特殊）	「途中まで」再生させたいとき	animation-iteration-count: 1.5; → 1回半やる

6.animation-direction

アニメーションの再生方向を指定できる！

値	意味
normal	最初から最後まで通常再生で進む（規定値）。
reverse	最後から最初に向かって逆再生で進む（100％→0％に変化する）。
alternate	行って帰って行って帰って…で進む。
alternate-reverse	alternateの逆方向で再生する。

animation-direction: alternate;

7.animation-fill-mode

アニメーションの再生前後の状態

値	説明	よくある使い方
none（初期値）	なし	初期状態
forwards	再生後、最後のキーフレームの状態を保持	アニメ後のスタイルをそのままにしたいとき！
backwards	再生前、最初のキーフレームの状態を保持	遅延中もアニメの最初の状態で見せたい時に便利
both	backwardsとforwardsの両方を適用	アニメ前後ともキープしたい！という場合に使用される

8.animation-play-state

アニメーションの再生と1時停止

値	意味
running（初期値）	再生中
paused	一時停止

JavaScriptアニメーション

外部ライブラリを使わずにアニメーションを実装できる、比較的新しいJavaScriptの標準仕様です。
CSSアニメーションに近い書き方で、JavaScriptによる制御の柔軟性を持っています。

使用方法

DOM要素のElement.animate()メソッドを使用します。

// 実際に動かしたい要素を変数に定義
const target = document.querySelector('セレクター');
target.animate(
  // キーフレーム※CSSプロパティを記述できる（動かす内容を記述）
  [
    { transform: 'translateX(0px)', opacity: 1 },
    { transform: 'translateX(100px)', opacity: 0.5 }
  ],
  // プロパティ指定（アニメーションの設定を記述）
  {
    duration: 1000, // 1000ms
    easing: 'ease-in-out',
    fill: 'forwards' // 終了時の状態を保持
  }
);

とりうるプロパティ

プロパティ名	データ型	説明	主な値の例と意味
duration	数値 (ms)	アニメーションの再生時間をミリ秒（ms）で指定します。	1000 (1秒)
delay	数値 (ms)	アニメーションが開始されるまでの遅延時間をミリ秒で指定します。	500 (0.5秒後に開始)
iterations	数値 or 'Infinity'	アニメーションの繰り返し回数を指定します。	3 (3回繰り返す)、'Infinity' (無限に繰り返す)
direction	文字列	アニメーションの再生方向を指定します。	normal (通常)、reverse (逆再生)、alternate (往復再生)、alternate-reverse (逆から往復再生)
easing	文字列	アニメーションの**速度変化（緩急）**を指定します。CSSのtransition-timing-functionと同じ形式です。	linear、ease-in、cubic-bezier(...)
fill	文字列	アニメーション再生前と再生後に、要素がアニメーションのスタイルを保持するかどうかを指定します。	none、forwards (終了時の状態を保持)、backwards (開始時の状態を適用)、both
endDelay	数値 (ms)	各繰り返しサイクルの終わりに発生する遅延時間（ミリ秒）を指定します。	200 (各サイクルの終わりに200ms停止)
composite	文字列	アニメーションの合成方法を指定します。	replace、add、accumulate

具体例

下記はIDが multiProp の要素に対し、
2秒間で拡大・回転してから元に戻るアニメーションを一度だけ実行します。

const element = document.getElementById('multiProp');

element.animate(
  [
    // アニメーションの状態（キーフレーム）の配列
    // 0%: 等倍・0度回転で開始
    { transform: 'scale(1) rotate(0deg)', offset: 0.0, easing: 'ease-out' },
    // 50%: 1.5倍に拡大し、45度回転
    { transform: 'scale(1.5) rotate(45deg)', offset: 0.5 }, 
    // 100%: 等倍・0度回転に戻って終了
    { transform: 'scale(1) rotate(0deg)', offset: 1.0, easing: 'ease-in' } 
  ],
  {
    // アニメーションの実行方法（オプション）
    duration: 2000,   // 2000ミリ秒 = 2秒かけて実行
    iterations: 1,    // 実行回数は1回
    fill: 'none'      // 終了後、要素は初期状態に戻る
  }
);

主要な部分の解説

コード部分	役割	意味
[ { ... }, { ... } ]	キーフレーム	アニメーションの「途中経過の状態」を定義します。
transform	CSSプロパティ	サイズ変更 (scale) と回転 (rotate) を指定しています。
offset: 0.0 / 0.5 / 1.0	タイミング	アニメーション全体（2秒）のどの時点（0% / 50% / 100%）でその状態になるかを指定します。
duration: 2000	実行時間	アニメーションの合計時間を 2秒 (2000ミリ秒) に設定します。
iterations: 1	繰り返し	アニメーションを 1回 のみ実行します。
fill: 'none'	終了後の状態	アニメーションが完了した後、要素を初期状態に戻します。