CSSアニメーションの実現

アニメーションの API#

CSS でアニメーションを作成するには、主に以下のいくつかの重要な API に依存します：

@keyframes ルール
- アニメーションの中間ステップ（キーフレーム）を定義するために使用されます。@keyframes ルールでは、アニメーションの過程で特定の時点における要素のスタイルを設定できます。
```
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
```
または、パーセンテージを使用して複数のキーフレームを指定できます：
```
@keyframes example {
  0%   {background-color: red;}
  50%  {background-color: blue;}
  100% {background-color: yellow;}
}
```
@keyframes ルールはいつ発動しますか？
- 要素が animation-name 属性にバインドされ、アニメーションが開始されると、@keyframes ルールで定義されたキーフレームが指定された時間と速度曲線に従って実行されます。
- 例えば、上記の example アニメーションが animation-name 属性にバインドされると、animation-duration と animation-timing-function 属性の設定に従って実行されます。
animation-name 属性
- セレクタにバインドする必要がある @keyframes の名前を指定します。
```
.element {
  animation-name: example;
}
```
animation-duration 属性
- アニメーションが 1 サイクルを完了するのにかかる時間を定義します。例えば、秒またはミリ秒です。
```
.element {
  animation-duration: 2s;
}
```
animation-timing-function 属性
- アニメーションの速度曲線を定義します。例えば、linear, ease, ease-in, ease-out, ease-in-out, または cubic-bezier 関数です。
```
.element {
  animation-timing-function: ease-in-out;
}
```
CSS アニメーションでは、アニメーションの速度曲線を指定することでアニメーションの変化速度を制御できます。以下は一般的な速度曲線のいくつかです：
1. linear
  - アニメーションの速度が一定です。つまり、アニメーションは加速や減速なしで一定の速度でスムーズに進行します。
2. ease
  - デフォルトの速度曲線です。アニメーションは低速で始まり、加速し、最後に減速します。これにより、アニメーションはより自然に見え、現実世界の物体の運動状態を模倣します。
3. ease-in
  - アニメーションは低速で始まり、進行するにつれて速度が徐々に増加し、終了します。この曲線は、動作の開始段階を強調する必要があるシーンに適しています。
4. ease-out
  - アニメーションは全速で始まり、徐々に減速して停止します。この曲線は、動作の終了段階を強調する必要があるシーンに適しています。
5. ease-in-out
  - アニメーションは低速で始まり、終了し、中間部分はより速い速度で動きます。この速度曲線は ease-in と ease-out の組み合わせで、スムーズな遷移が必要なシーンに適しています。
6. cubic-bezier(n,n,n,n)
  - 自分で速度曲線をカスタマイズできます。cubic-bezier 関数は 4 つのパラメータを受け取り、これらのパラメータは三次ベジェ曲線を定義し、アニメーションの加速と減速のプロセスを正確に制御できます。CSS は、これらの 4 つのパラメータを視覚化し調整するための cubic-bezier ツールを提供しています。
    ease-n. 簡単；快適，自在
    v. 軽減する，和らげる，リラックスする；ゆっくり動く；容易にする；減少させる；退職させる；慣れる
animation-delay 属性
- アニメーションの開始前の遅延時間を設定します。
```
.element {
  animation-delay: 1s;
}
```
animation-iteration-count 属性
- アニメーションが再生される回数を定義します。数字または infinite で無限回繰り返すことを示すことができます。
```
.element {
  animation-iteration-count: infinite;
}
```
animation-direction 属性
- アニメーションが逆方向に再生されるべきかどうかを指定します。一般的な値には normal, reverse, alternate, alternate-reverse があります。
```
.element {
  animation-direction: alternate;
}
```
animation-fill-mode 属性
- アニメーションの実行前後にターゲット要素にスタイルを適用する方法を指定します。例えば、forwards は最後のフレームのスタイルを保持します。
```
.element {
  animation-fill-mode: forwards;
}
```
animation-fill-mode 属性は、CSS アニメーションでアニメーションが実行される前後にスタイルをターゲット要素に適用する方法を指定するために使用されます。簡単に言えば、アニメーション実行前後の要素のスタイル表現を決定します。animation-fill-mode 属性は以下の値を受け入れます：
1. none
  - デフォルト値。デフォルトの動作を変更しません。アニメーションはターゲット要素にスタイルを適用せず、アニメーション終了後に要素はアニメーション未実行時の状態に戻ります。
2. forwards
  - アニメーションが完了した後、要素はアニメーションの最後のキーフレームの計算値によって決定されたスタイルを保持します。つまり、アニメーション終了後に要素はアニメーション終了時のスタイルを保持します。
3. backwards
  - アニメーションは要素に適用された瞬間に最初のキーフレームのスタイルを即座に適用します。アニメーションが遅延して開始されても、要素はアニメーションの初期状態のスタイルを即座に取得します。
4. both
  - アニメーションは forwards と backwards のルールに従い、遅延期間中に最初のキーフレームのスタイルを適用し、アニメーション終了後に最後のキーフレームのスタイルを保持します。
例えば、フェードアウトアニメーションがある場合、アニメーション終了後に要素が透明のままであることを望むかもしれません。
animation 短縮属性
- animation 短縮属性を使用して、すべてのアニメーション属性を同時に設定できます。
```
.element {
  animation: example 2s infinite ease-in-out;
}
```
animation-play-state 属性
- アニメーションの再生状態を制御します。paused に設定するとアニメーションが一時停止し、running に設定するとアニメーションが再生され続けます。
```
.element {
  animation-play-state: paused;
}
```
CSS 変数を使用してアニメーションを制御
- CSS 変数（カスタムプロパティ）はアニメーションと組み合わせて使用することができ、アニメーションに動的な値を提供したり、テーマのカスタマイズを実現したりします。
```
:root {
   --animation-duration: 2s;
}

.element {
  animation-duration: var(--animation-duration);
}
```
@media クエリとアニメーションの使用
- メディアクエリと組み合わせて異なるアニメーション効果を適用し、異なる画面サイズやデバイス特性に応じてアニメーションを応答させることができます。
```
@media (max-width: 600px) {
  .element {
    animation-name: exampleSmallScreen;
  }
}
```
will-change 属性
- ブラウザに要素が行う変更を事前に通知し、パフォーマンスを最適化します。アニメーションを直接制御する属性ではありませんが、適切に使用することでアニメーションの滑らかさを向上させることができます。
```
.element {
  will-change: transform, opacity;
}
```
CSS アニメーションを利用してパフォーマンスを最適化
- 可能な場合は、transform と opacity のアニメーションを使用してください。これらはハードウェアアクセラレーションを通じてアニメーションのパフォーマンスを向上させることができます。
アニメーションイベント
- CSS 自体は直接的なイベントリスニングメカニズムを提供しませんが、JavaScript では、アニメーションの異なる段階でスクリプトを実行するために、animationstart, animationend, および animationiteration などのアニメーション関連のイベントをリッスンできます。
```
document.querySelector('.element').addEventListener('animationend', function() {
  console.log('アニメーション終了');
});
```

アニメーション API の実践#

1. keyframes の使用#

.button {
  cursor: pointer;
  animation-duration: 3ms;
}
@keyframes button {
  0% {
    background-color: aqua;
  }
  100% {
    background-color: bisque;
  }
}

問題：それは発動しません、アニメーションは一般的にいつ発動しますか？

.button {
   cursor: pointer;
   animation-duration: 3s;
   animation-name: bgcolor;
   animation-delay: 0s;
   animation-timing-function: ease-in;
   background-color: aqua;
   animation-fill-mode: both;
   animation-iteration-count: infinite;
}
@keyframes bgcolor {
   0% {
      background-color: rgb(0, 140, 140);
   }
   100% {
      background-color: rgb(208, 127, 29);
   }
}

animation-name 属性は keyframes の名前をそれに割り当てるもので、これによりアニメーションが発動します。次に、デフォルトでは最初の読み込み時に一度発動します。もしあなたがバインドした場合。
animation-duration 属性はアニメーションの持続時間を示します；
animation-delay 属性はアニメーションの遅延時間を示します；
animation-timing-function はアニメーションの時間関数であり、このアニメーションがどのような関数で実行されるかを示します；linear、ease、ease-in、ease-in-out など。ease は簡単、軽減の意味で、ease-in はゆっくり進むことを意味します。
animation-iteration-count はアニメーションの回数であり、iteration は繰り返しの意味で、count は回数の意味です。この属性はアニメーションの回数を示します。設定できるパラメータは 1,2,3,4,5... または infinite で、無限回繰り返すことを示します。
animation-play-state はアニメーションの再生状態であり、paused は一時停止の意味で、running は実行中の意味です。
animation-fill-mode はアニメーションのフィルモードであり、forwards は前方の意味で、ここでは最後のフレームの設定を適用します。backwards は後方の意味で、ここでは最初のフレームの設定を適用します。通常、この最初のフレームは元の設定であり、アニメーションフレームの最初の 0% ではありません。both は両方の意味で、ここではほぼ forwards と同じです。

2. hover 属性の実装#

keyframes ホバーアニメーションの実装

.button {
   cursor: pointer;

   background-color: antiquewhite;
}
.button :hover {
   animation-name: bgcolor;
   animation-duration: 3s;
   background-color: antiquewhite;
}

@keyframes bgcolor {
   0% {
      background-color: rgb(0, 140, 140);
   }
   100% {
      background-color: rgb(208, 127, 29);
   }
}

問題：なぜホバーアニメーションが実現しなかったのか？
解決：.button :hoverを.button:hoverに変更します。問題は.button :hoverセレクタにあります。CSS セレクタでは、.button :hoverは.button内部の任意の要素がホバー時の状態を選択することを意味し、.button自体がホバー時の状態ではありません。これは、.buttonと:hoverの間にスペースがあるためで、これは子孫セレクタを示し、.buttonの子要素のホバー状態を選択することを意味しますが、.button自体ではありません。

.button {
  cursor: pointer;

  background-color: antiquewhite;
}
.button:hover {
  animation-name: bgcolor;
  animation-duration: 3s;
  background-color: antiquewhite;
  animation-iteration-count: infinite;
}

@keyframes bgcolor {
  0% {
    background-color: rgb(0, 140, 140);
  }
  50% {
    background-color: rgb(208, 127, 29);
  }
  100% {
    background-color: rgb(0, 140, 140);
  }
}

3. クリックイベントの実装#

なぜクリック後にフィードバックがないのか？

.button {
  cursor: pointer;

  background-color: antiquewhite;
}
.button:checked {
  animation-name: bgcolor;
  animation-duration: 3s;
  background-color: antiquewhite;
  animation-iteration-count: infinite;
}

@keyframes bgcolor {
  0% {
    background-color: rgb(0, 140, 140);
  }
  50% {
    background-color: rgb(208, 127, 29);
  }
  100% {
    background-color: rgb(0, 140, 140);
  }
}

問題は .button:checked セレクタを使用していることです。このセレクタは通常、フォーム要素（チェックボックス、ラジオボタンなど）の選択状態に使用され、通常のボタン要素には適用されません。もしあなたの .button が <button> または <div> 要素であれば、:checked 擬似クラスセレクタは適用されず、クリック時に何の効果もありません。

ボタンをクリックした後にアニメーションをトリガーしたい場合、以下の方法を検討できます：

JavaScript を使用してクリックイベントが発生したときにクラスを追加し、そのクラスを通じてアニメーションをトリガーします。
クリック（またはタッチ）の即時フィードバックを望む場合は、:active 擬似クラスを使用することを検討できます。ただし、:active 状態は要素がアクティブ（つまり、マウスが押されている間）であるときのみ有効で、マウスが離れると要素はすぐに通常の状態に戻ります。
状態を切り替えることができるボタン（スイッチボタンなど）には、隠されたチェックボックス（checkbox）とラベル（label）を使用して実現できます。ユーザーがラベルをクリックすると、チェックボックスの選択状態が変わり、チェックボックスの :checked 擬似クラスを通じてアニメーションを制御できます。

active に変更すると、アクティブ状態になりますが、マウスを離すと元の状態に戻ります。つまり、マウスを押し続けている間はアニメーションが実行され、離すと実行されません。
これはクリックイベントではなく、押し続けイベントと呼ぶべきです。

では、クリックイベントアニメーションを実現するにはどうすればよいでしょうか？

.button {
   cursor: pointer;
   background-color: antiquewhite;
}

.animate {
   animation-name: bgcolor;
   animation-duration: 3s;
   animation-iteration-count: infinite;
}

@keyframes bgcolor {
   0% {
      background-color: rgb(0, 140, 140);
   }
   50% {
      background-color: rgb(208, 127, 29);
   }
   100% {
      background-color: rgb(0, 140, 140);
   }
}

document.getElementById('animatedButton').addEventListener('click', function() {
this.classList.add('animate');
});

4. その他のアニメーション効果の実現、回転、拡大縮小、移動など#

CSS のtransform属性を使用すると、要素を移動、拡大、回転、傾斜などの変形操作を行うことができます。以下は一般的なtransform関数のいくつかです：

平行移動（Translate）：
- translate(x, y)：X 軸と Y 軸に沿って要素を移動します。
- translateX(x)：X 軸に沿ってのみ要素を移動します。
- translateY(y)：Y 軸に沿ってのみ要素を移動します。
```
.translate {
  transform: translate(50px, 100px); /* 右に50px、下に100px移動 */
}
```
拡大縮小（Scale）：
- scale(x, y)：X 軸と Y 軸に沿って要素を拡大縮小します。
- scaleX(x)：X 軸に沿ってのみ要素を拡大縮小します。
- scaleY(y)：Y 軸に沿ってのみ要素を拡大縮小します。
```
.scale {
  transform: scale(2, 3); /* 幅を2倍、高さを3倍に拡大 */
}
```
回転（Rotate）：
- rotate(angle)：要素を回転させます。angleは回転角度で、単位はdeg（度）、rad（ラジアン）などです。
```
.rotate {
  transform: rotate(45deg); /* 時計回りに45度回転 */
}
```
傾斜（Skew）：
- skew(x-angle, y-angle)：X 軸と Y 軸に沿って要素を傾斜させます。
- skewX(angle)：X 軸に沿ってのみ要素を傾斜させます。
- skewY(angle)：Y 軸に沿ってのみ要素を傾斜させます。
```
.skew {
  transform: skew(30deg, 20deg); /* X軸に沿って30度、Y軸に沿って20度傾斜 */
}
```
組み合わせ使用：
- transform属性は複数の変形関数を組み合わせて使用でき、指定された順序で要素に適用されます。
```
.combine {
  transform: rotate(30deg) translate(100px, 50px) scale(1.5);
}
```
この例では、.combineクラスの要素は最初に 30 度回転し、その後 X 軸と Y 軸に沿って移動し、最後に全体を 1.5 倍に拡大されます。
matrix変換は CSS で非常に強力な変換ツールであり、6 つの値の行列を使用してすべての 2D 変換効果（平行移動、回転、拡大縮小、傾斜）を組み合わせることができます。この行列は次のようになります：
- scaleX()とscaleY()はそれぞれ X 軸と Y 軸の拡大縮小比率を表します。
- skewX()とskewY()はそれぞれ X 軸と Y 軸の傾斜角度を表します。
- translateX()とtranslateY()はそれぞれ X 軸と Y 軸の平行移動距離を表します。
- matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
  matrix変換を使用すると、平行移動、拡大縮小、回転、傾斜を含むすべての 2D 変換効果を実現できますが、直感的ではなく、適切な行列値を構築するためには一定の数学的知識が必要です。
  ただし、注意が必要なのは、matrix変換自体は 2D 変換にのみ適用され、Z 軸の平行移動や回転などの 3D 変換にはmatrix3dや他の 3D 変換関連の関数（translateZ()、rotateX()、rotateY()、rotateZ()、perspective()など）を使用する必要があります。したがって、あなたの質問がmatrixが 3D 変換を処理できるかどうかであれば、答えはできません。3D 変換にはmatrix3dまたは他の 3D 変換関数を使用する必要があります。

transform属性を使用すると、ページのレイアウトに影響を与えることなく要素を視覚的に変形でき、複雑なアニメーションやレイアウト効果を実現するための強力なツールです。さらに、transformは通常、transitionやanimation属性と組み合わせて使用され、スムーズな遷移効果を実現します。
。

.button {
  cursor: pointer;

  background-color: antiquewhite;
}
.button:active {
  animation-name: bgcolor;
  animation-duration: 3s;
  background-color: antiquewhite;
  animation-iteration-count: infinite;
}
.button:hover {
  animation-name: aaa;
  animation-duration: 3s;
  background-color: antiquewhite;
  animation-iteration-count: infinite;
}

@keyframes bgcolor {
  form {
    transform: rotate(32deg);
  }
  to {
    transform: rotate(90deg);
  }
}
@keyframes aaa2 {
  form {
    transform: scale(1);
  }
  to {
    transform: scale(2);
  }
}
@keyframes aa21a {
  form {
    transform: skew(2deg);
  }
  to {
    transform: skew(60deg);
  }
}
@keyframes aaa {
  form {
    transform: translate(0px, 0px);
  }
  to {
    transform: translate(0px, 250px);
  }
}

5. グラデーション遷移アニメーション効果#

transition を使用してグラデーションアニメーションを実現

.button {
  width: 20px;
  cursor: pointer;
  transform: none;
  transition-property: transform width;
  transition-duration: 2s;
  background-color: antiquewhite;
}

.button:hover {
  width: 230px;
  transform: rotate(49deg);
}

transform 変化アニメーション

.button {
  cursor: pointer;
  transform: none;
  transition: 2s;
  background-color: antiquewhite;
}

.button:hover {
  transform: rotate(49deg);
}

これらは本質的にすべて transition を使用して実現されたグラデーションアニメーションです。transform も CSS の属性の一部に過ぎません。

6. `@keyframes`アニメーションの構築：#

JavaScript を使用して完全な@keyframesアニメーションを構築し、それを文書の<style>タグに挿入します。

例：

var duration = '2s';
var fromPosition = '-100%';
var toPosition = '0';
var styleSheet = document.createElement('style');
styleSheet.type = 'text/css';
styleSheet.innerHTML = `@keyframes dynamicSlideIn {
  from { transform: translateX(${fromPosition}); }
  to { transform: translateX(${toPosition}); }
}`;
document.head.appendChild(styleSheet);

var elem = document.getElementById('myElement');
elem.style.animationName = 'dynamicSlideIn';
elem.style.animationDuration = duration;
elem.style.animationFillMode = 'forwards';