勉強の続き：CSSアニメーションをつける

昨日、「次はレスポンシブ！」と思っていましたが、CSSアニメーションがまだありました。

CSSでアニメーションを作る！途端に難しくなってくる気がする！

教科書はこれです。

これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 [ Capybara Design 竹内 直人 ] 価格：2,420円（税込、送料無料) (2024/10/31時点) 楽天で購入

CSSアニメーションには2種類あって、「トランジションアニメーション」と、「キーフレームアニメーション」があるんですって。

トランジションアニメーションは、始点と終点の二つの状態を定義するもの。始めるためのトリガーが必要で、再生は1回限りのもの。

キーフレームアニメーションは、始点と終点の間に複数のキーフレームを作れる。トリガーがいらない。ループ回数や再生方法を指定できる。

この章では、フォームのボタンにマウスを載せた時に動くアニメーション（トランジションアニメーション）と、自動でずっとスクロールを促すように動いているアニメーション（キーフレームアニメーション）を作りました。

今日の進捗
セクション1 CSSアニメーションの基礎
①CSSアニメーションの種類
②完成ファイルでアニメーションを確認しよう
③作業ファイルを確認しよう
④トランジションアニメーションを使ってみよう
⑤キーフレームアニメーションを使ってみよう

えっとまず、トランジションアニメーションの設定方法。

トランジションアニメーションの設定方法

input[type=”submit”]:hover {（フォームの送信ボタンにマウスカーソルを合わせた状態を指定）
background-color: #c7887f;（背景色を#c7887fに変化させる）
margin-left: 20px; （左に20pxずらす）
transition-property: background-color,margin-left;（背景色と、左にずらすことを対象とする）
transition-duration: 300ms;（300ミリ秒で動かす）
transition-timing-function: ease-in:（始めるときはゆっくり、終了時には速く）
transition-delay: 0ms;　（遅延はさせない）
}

黄色いマーカーをつけた部分さえ変えれば、私にもすぐに素敵なアニメーションをつけることができるようになる…
のかな！？（たぶんそう）

で、次が、キーフレームアニメーション。

キーフレームアニメーションの設定方法

これが難しかった。

今回、scrollと書いた文字の下の縦棒を上から下へ動かすというアニメーションでした。

今回は四つのキーフレームを設定。

０％（はじまり）
50%（中間点）
50.1%（中間点2）
100%（おわり）

で、はじまりの地点では原点をtopに指定、縦（Y）の大きさは0。
中間点では縦（Y）の大きさを1にする。「｜」の形になっている。
中間点2では、縦（Y）の大きさは1のままにし、原点をbottomに変える。形は「｜」のまま。
おわりでは、縦（Y）の大きさが原点に向かって縮んで0になる。

読んだだけだとこれ、本当意味がわからなくて…
ChatGPTにも解説してもらったけど、やっぱりよくわからなかった笑。
書いててやっとちょっとわかってきました。上から伸びた｜が、下に向かって消えるという流れなわけですね。
簡単な図を作ってみました。実際に作るのは四つだけですが、途中経過を入れています。

10％と40%は設定しませんが、想像上の途中経過。
0%から50%の間に、Yが0から1に伸びる。

で、ここで基準点をtopからbottomへうつす。（見た目には変化なし）

要は、途中で基準点を下に移さないと、上から伸びた棒が上に縮んで消える（伸び縮みする）アニメーションになってしまうので、上から伸びてきて下へ消えていくアニメーションにするために、こういう動きをさせているということですね。
やっと腑に落ちました。

この本、動画もついてるんですよね…！
動画を見たらやっとわかった。これわかんなくなったらすぐ読み返せるし、動画も何度でも見られるわけだし、2,200円って、すごく安いような気がしてきた。

それで、上で作ったアニメーションを、動かしたい場所に指定する。

header .scroll img {　（どこに動きをつけるかを指定。ヘッダーにある.scroll imgを指定）
animation-name: scrollAnimation;　（さっき作ったアニメーションの名前を指定）
animation-duration: 1.8s;　（1.8秒で動かす）
animation-timing-function: ease-out;　（早く始まりゆっくり終わる）
animation-itertion-count: infinite;　（無限ループする）
}

無限ループじゃなくて回数を指定することもできるんですって。

アニメーションも作れるようになると色々とできることが広がりそうな気がします。

明日は（今度こそ）レスポンシブ！！