css3 アニメーション

https://qiita.com/7968/items/1d999354e00db53bcbd8

↑このサイトが分かり易い

【CSS】animation・keyframesを徹底解説

↑これもわかりやすい
animation-delayが効かないときは

※つまり、非表示にならず消えないない状態のとき

https://teratail.com/questions/208980

opacity: 0を追加する

.test02 {
animation-name:animation2;
animation-duration: 10s;
animation-timing-function: ease-in-out;
animation-delay: 5s;
opacity: 0;

}

 

https://www.webdesignleaves.com/pr/css/css_basic_07.html

animationの設定方法　の箇所から参照

 

animation の設定方法

animation プロパティでは、キーフレームを利用したアニメーションを設定することができます。言い換えると animation プロパティを使用してアニメーションを行うには、キーフレームを作成する必要があります。

キーフレーム @keyframes

キーフレーム
始点と終点の間に複数のアニメーションの変化の設定を記述するもので、
@keyframes キーフレーム名 {…} という形で記述します。
  • @keyframes の中には始点と終点を含むキーフレームの設定を記述します
  • 始点の設定は 0% {…} または from {…}に、終点の設定は 100% {…} または to {…} に記述します
  • 必要に応じて 1 ~ 99% のキーフレームを追加します
  1. @keyframes キーフレーム名 {
  2. 0% { 始点のキーフレーム：アニメーションさせたいプロパティの初期状態 }
  3. 100% { 終点のキーフレーム：アニメーションさせたいプロパティ最終状態 }
  4. }

または、

  1. @keyframes キーフレーム名 {
  2. from { 始点のキーフレーム：アニメーションさせたいプロパティの初期状態 }
  3. to { 終点のキーフレーム：アニメーションさせたいプロパティ最終状態 }
  4. }

50% のキーフレームを追加した例

  1. @keyframes my_anime {
  2. 0% {
  3. background-color: #f00;
  4. }
  5. 50% {
  6. background-color: #0f0;
  7. }
  8. 100% {
  9. background-color: #00f;
  10. }
  11. }

以下は、クラスが「animation_test」の要素の背景色を3秒間で水色、ピンク、オレンジに変化させるアニメーションの例です。

  1. <p class=“animation_test”>The First Animation Sample.</p>

アニメーションの対象の要素（この例ではクラスが animation_test の要素）に animation プロパティを指定します。

この例では必須のキーフレーム名（my_anime01）と再生時間（デフォルトは 0s）を 3s に指定しています。

  1. .animation_test {
  2. width: 300px;
  3. padding: 10px 20px;
  4. text-align: center;
  5. font-weight: bold;
  6. animation: my_anime01 3s;
  7. }
  8.  
  9. @keyframes my_anime01 {
  10. 0% {
  11. background-color: skyblue;
  12. }
  13. 50% {
  14. background-color: pink;
  15. }
  16. 100% {
  17. background-color: orange;
  18. }
  19. }

The First Animation Sample.

これでページを読み込むと同時にアニメーションの再生が始まり、キーフレームで指定したように背景色が変化します。但し、この例の場合は位置がページの中ほどなので、おそらくこの位置に来るまでにアニメーションは終了しているので、アニメーションを表示させるにはページを再読み込みさせます。

アニメーション開始のタイミングは :hover などの擬似要素を利用したり、JavaScript (jQuery) を利用することができます。

animation のプロパティ

animation プロパティでアニメーションを定義する場合、以下の項目を指定することができます。

これらの項目は transition プロパティ同様、 animation プロパティでまとめて（ショートハンド）定義することも、個別に設定することも可能です。

まとめて指定する場合（ショートハンド）

指定する各項目を半角スペース区切りで指定します。

animation: キーフレーム名 アニメーションにかかる時間 イージング 遅延時間 繰り返し回数 再生方向;

  1. animation:sample_anime 0.3s ease-in-out 3s infinite alternate both;

個別に指定する場合

各項目の値を指定します。以下は指定例です。

  1. animation-name: sample_anime;
  2. animation-duration: 0.3s;
  3. animation-timing-function: ease-in-out;
  4. animation-delay: 3s;
  5. animation-iteration-count:infinite;
  6. animation-direction: alternate;
  7. animation-fill-mode: both;
animation プロパティ
指定する項目 意味と使用例 デフォルト値
animation-name アニメーション名（キーフレーム名）
アニメーションのキーフレームを示す @keyframes の名前を指定
animation-name: sample_anime;		 なし
*必須
animation-duration 1 回のアニメーションサイクルを行う時間の長さ
この値は、秒 (単位 “s” で指定) またはミリ秒 (単位 “ms” で指定) で指定することができる。単位を指定しない場合は、秒で指定したものとみなされます。
注: 負の値は 0 として扱われます。
animation-duration: 120ms;		 0s
animation-timing-function アニメーションの速度変化（イージング : タイミング関数）
キーフレームのブロック内で定義されたアニメーションタイミング関数は、そのキーフレームに対して適用されます。一方、キーフレームでタイミング関数が指定されていない場合は、アニメーション全体に対して指定されたタイミング関数が使用されます。（transition/transition-timing-function で指定する値参照  ）
animation-timing-function: ease-in-out;
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);		 ease
animation-delay アニメーションを開始するまでの時間（遅延時間）
要素が読み込まれてからアニメーションを始めるまでの遅延時間
遅延時間に負の値を指定すると、アニメーションは直ちに開始されますが、アニメーションが途中から始まるように見えます。例えば、遅延時間に -1s を指定するとアニメーションは直ちに始まりますが、それは 1 秒経過した時点からになります。
この値は、秒 (単位 s で指定) またはミリ秒 (単位 ms で指定) で指定することができます。単位を指定しない場合は、宣言が無効になります。
animation-delay: 3s;		 0s
animation-iteration-count アニメーションの繰り返し回数
無期限に繰り返すことを示す infinite を指定することもできます。
負の値は 0 として扱われます。また、アニメーションの周期の一部を実行するために、整数以外の値を指定することも可能です。例えば 0.5 を指定すると、アニメーションの周期の半分を実行します。
animation-iteration-count: 2.5		 1
animation-direction アニメーションの繰り返し方法（再生方向）
アニメーションするたびに、逆方向のアニメーションを行ってからアニメーションを繰り返すか、始めの状態にリセットしてアニメーションを繰り返すかを設定します。
normal
順方向のアニメーションのみを毎回実行。アニメーションのサイクルごとに、初期状態にリセットされてからアニメーションが再び始まります。
alternate
繰り返しの際、偶数回は逆方向に再生。逆方向のアニメーションを行うときは、初期状態に戻るようなアニメーションになります。また、timing-functions の値も逆になります。例えば ease-in のアニメーションは、逆方向のアニメーションでは ease-out のアニメーションに置き換えられます。
reverse
アニメーションを毎回逆方向に実行。アニメーションのサイクルごとに、最終状態にリセットされてからからアニメーションが再び始まります。
alternate-reverse
alternateとは逆になります。奇数回を逆方向、偶数回を正方向に再生します。
animation-direction: alternate;		 normal
animation-fill-mode アニメーションの実行前後に、指定したスタイルを適用するかを設定します。
none
要素の元のスタイルのまま（アニメーションで指定されたスタイルは、アニメーションの実行前や実行後には適用されない）
forwards
再生後、要素のスタイルは最後のキーフレームの状態のままになります。
backwards
再生前、要素のスタイルは最初のキーフレームの状態になります。
both
再生前、要素のスタイルは最初のキーフレームの状態になり、再生後、要素のスタイルは最後のキーフレームの状態のままになります。
animation-fill-mode: both;		 none
animation-play-state アニメーションが実行中か、一時停止されているかを判定します。このプロパティの値を取得することで、アニメーションが実行中か否かを調べることができるます。また、このプロパティの値を設定することで、アニメーションを一時停止させたり、再開させたりすることができます。
一時停止されたアニメーションを再開すると、アニメーションは最初から始まるのではなく、一時停止された時点から始まります。
running
アニメーションは実行中。
paused
アニメーションは一時停止している。
animation-play-state: paused;		 running

参考サイト