【プログラミング独学27日目】アニメーションの自作・一括指定プロパティtransition・高度なアニメーション

2022-03-26FREELANCE,WORDPRESS/WEB

こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。

私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。

【プログラミング独学1日目】HTML・imgタグ・alt属性・metaタグ・rel属性・href属性・

独学でサイト制作は行なってきましたが、改めてHTMLからプログラミングをしっかり学び直すことにしまし ...

 https://chanmk.tokyo/programming_1/

今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。

【プログラミング独学27日目】学んだこと

今日もCSSのアニメーションの続きをやりました。プログラミングとは直接関係無いですが、最近の悩みはイスです。以前仕事用のデスクチェアを買ったものの合わず、引越しのときに廃棄しました。代わりにそのへんのイスを使っていますが脚が疲れてつらい・・・良いイスが欲しいです。

①アニメーションの自作

アニメーションをもっと凝りたい場合は、デベロッパーツールを使ってアニメーションを自作することができます。

transition-timing-function:ease-out;

例えば上のように記述し、デベロッパーツールを開いてみると、「ease-out」の前にアイコンが表示されます。アイコンをクリックするとアニメーションの編集画面が現れるため、そこでアニメーションを自由に変更することができます。エディターは横軸が時間、縦軸が変化寮を表しています。

編集画面左にあるパターンから他の動きを指定しても良いですし、エディターを直接触って動きを変化させてもOKです。変化させるとCSSに記述される「cubic-bezier」は、曲線の形をきめ細かく設定するための値です。納得にいく動きができたら、CSSに表示されている「cubic-bezier」の記述をそのままコピーし、VS Codeに貼り付ければOKです。貼り付ける場所は上記CSSの「ease-out」の部分です。例えば以下のようになります。

transition-timing-function:cubix-bezier(0.4,0,1,1);

②一括指定プロパティtransition

以下の4つは一括指定プロパティである「transition」でまとめて記載することができます。

一括指定プロパティtransitionの書き方は順不同で良く、省略可能です。そのため例えば以下のように記述ができます。

transition:transform .3s ease-out;

ここで例えばtransition-delayも加えたかったとき、上の「.3」と併せて時間に関する記述が並ぶことになります。このようなときは、先に書いた方が「transition-duration」、後に書いた方が「transition-delay」を示すことになります。

transition:transform .3s 1s ease-out;

つまり上のように記述した場合、「transition-duration」が0.3s、「transition-delay」が1sという意味になります。

③複数のプロパティを変化させたいとき

.box:hover {
 transform:translateX(30px);
 background:skyblue;
}

例えば上のように記述した上で、backgroudに関する指定を追加したかったとしましょう。そのときはtransitionプロパティのところで以下のように書き加えます。

transition:transform .3s 1s ease-out ,background,5s;

独学に限界を感じたらプログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。

▼完全無料のプログラミングスクール

【フリーター・未経験歓迎】手に職をつけるプログラミング＆就活スクール

④高度なアニメーション

今までは変化前の指定→変化後の指定→変化前と変化後の間の動きを補完するという方法でCSSを記述していましたが、この方法では全体のアニメーションを繰り返させたり、アニメーションの途中で好きなスタイルを追加したりといったことができません。そのようなときにanimationプロパティを使えば、これらが可能になります。ここにきてそのままの名称のプロパティが出てきましたね。

animationプロパティの書き方は以下の通りです。

@keyframes move {
 0% {
   transform:none;
 }

 80% {
   transform:translateX(200px) rotate(360deg);
 }

 100% {
   transform:translateX(300px) rotate(360deg);
 }
}

.box {
 animation-name:move;
 animation-duration:2s;
}

まず「@keyframes」と書き、その後ろでこのキーフレームの名前を指定します。今回は上のように「move」としましたが、好きな名前でOKです。class指定をするときと同じようなイメージですね。

その後、アニメーションのどの段階でどのようなスタイルを入れていくかを指定します。上であれば0%（＝アニメーション開始時）、80%、100%（＝アニメーション終了時）のときのスタイルを指定しています。

なお0%はアニメーション開始時のスタイルであるため、変形前（.box）セレクターで指定したものと同じとなり書かなくてもOKです。ただ明示しておいた方が確実であるため、「アニメーション開始前と同じ（＝変形なし）」という意味で以下の記述を書いています。

0% {
   transform:none;
 }

その上で、変形前（.box）セレクターにキーフレーム名の指定や、transitionと同様アニメーションにかける時間などを指定します。

.box {
 animation-name:move;
 animation-duration:2s;
}

【プログラミング独学27日目】わからなかったこと・調べてわかったこと

今日のレッスンでよくわからなかったところは以下です。

デベロッパーツールの記述をコピーして貼り付ける必要性

デベロッパーツールでアニメーションの自作ができますが、デベロッパーツールのアニメーションエディタで表示された「cubic-bezier」の記述を、コピーしてVS Codeに貼り付ける意味がよくわかりませんでした。VS Codeに記述して反映された内容がデベロッパーツールで表示されているのに、VS Codeにコピペしないと反映されないのはなぜ？デベロッパーツールに書かれている内容＝サイトに反映されている内容なら、そのままじゃだめなの？と思いました。

このあたりは私がおかしいのか、質問している人は見つからず・・・。デベロッパーツールにあるエディタだからどうこうではなく、単にアニメーションの自作用エディタがデベロッパーツール内にあるというだけのことなんでしょうか。そう考えると納得がいきます。「デベロッパーツール」というだけで「＝サイトに反映されている」というような解釈になっていたので、このように悩んでしまったのかもしれません。アニメーション自作用エディタは、デベロッパーツールから独立していると考えるようにします。

複数のプロパティを指定したいときとは？

変化後のセレクター「.box:hover」でbackgroundの指定をした後、同じくbackgroundの指定を加えたいときにtransition一括指定プロパティの方に戻って記述を加えていました。意味不明だったのですが、「同じくbackgroundの指定を加えたい」と言われて「（変化後の画面で別の）backgroundの指定を加えたい」と解釈していたのですが、そういう意味では無かったのですね。アニメーションが動いている間にboxのbackgroundが変化していたので、単にbackgroundの指定をし、その詳細をtransitionで指定したんだと思います。つまり別のbackgroundを追加したわけではなく、1つのbackgroundについて詳細を書き加えただけ。

自分で書いていてもややこしくよくわかりませんが、一旦ここはこの程度の理解・納得としておき、次に進もうと思います。

rotate(360deg)を2回指定しているのに1回転のみなのはなぜ？

高度なアニメーションのところで、以下のような記述がありました。

80% {
   transform:translateX(200px) rotate(360deg);
 }

 100% {
   transform:translateX(300px) rotate(360deg);
 }

このアニメーションを実際に見てみると、200px→300pxのあたりや、360degを2回指定しているのに1回転しかしていないことなどに疑問を感じました。他の方も同様に感じたようで、先生の回答は以下のようなものでした。

とてもすっきりしました。

高度なアニメーションに書いた順で動作していないのはなぜ？

100% {
   transform:translateX(300px) rotate(360deg);
 }

例えば上のように記述しているのに、アニメーションの最後は回転してから直進するような動きをしていました。いまいちよくわからず悩んでいると、他の方も同様に感じたようで、先生の回答は以下のようなものでした。

とてもすっきりしました。

ただ独学に限界を感じたら、プログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。

▼完全無料のプログラミングスクール

【フリーター・未経験歓迎】手に職をつけるプログラミング＆就活スクール