【プログラミング独学28日目】アニメーションの終了地点指定・繰り返し・一括指定プロパティanimation・
こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。
私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。
https://chanmk.tokyo/programming_1/今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。
- プログラミング案件も受注できるようになりたい
- 歯科衛生士エンジニアを目指したい
- コーディングもライティングもできる歯科衛生士
【プログラミング独学28日目】学んだこと
今日もCSSのアニメーションの続きをやりました。昨日、毎日学習の記録が途切れました・・・。寝落ちしてしまったとかではなく、純粋に疲れて意図的にやめました（子どもの寝かしつけに失敗したことによるもの）。学習だけなら簡単ですが、こちらでのアウトプットもセットとして考えているので諦めました。その分今朝早く起きて学習を行なったので、そのようにゆるく続けていけば良いかなと思っています。
①アニメーションの終了地点を指定する
何も設定していないと、アニメーションは終了後にすぐアニメーション開始地点の位置まで戻ってきます。これを終了地点のまま留めておきたいときは以下のように記述します。
.box {
animation-fill-mode:forwards;
}②アニメーションを複数回繰り返す
アニメーションを終わったままにせず、同じアニメーションを複数回繰り返したいときは以下のように記述します。例えば2回繰り返したいときです。
.box {
animation-iteration:count:2;
}なお同じアニメーションを永遠と繰り返したいときは以下のように記述します。
.box {
animation-iteration:count:infinite;
}③アニメーションの方向を変える／逆方向にする
何も指定しないでいると、アニメーションは左から右方向へ再生されますが、これを右から左方向へ動かせるようにすることもできます。
.box {
animation-direction:reverse;
}④アニメーションの方向を変える／折り返す
何も指定しないでいると、アニメーションは左から右方向へ再生されます。これを左から右方向へ行った（1再生が終わった）後、折り返して右から左方向へ動かしてほしいというときは以下のような記述になります。
.box {
animation-direction:alternate;
}上のように記述すると、アニメーションは右方向から左方向へ行われるようになります。ここで注意したいのは、例えばアニメーションがAという動きの後Bという動きで1セットとなっていれば、上のような記述をしたとき「A→B→B→A」というようにアニメーションされます。そのまま鏡のように折り返されるので、「A→B→A→B」ではない点に注意しましょう。
⑤アニメーションの方向を変える／逆方向かつ折り返す
アニメーションの方向を右から左への動きにしつつ、1再生が終わった後折り返してほしいときは以下のように記述します。
.box {
animation-direction:alternate-reverse;
}以下で学んだflex-directionのときと同じで、「〇〇のreverse」というようにreverseを後に書く点に注意しましょう。
⑥アニメーションの動作速度に緩急を付けたいとき
以下で学んだtransition-timing-functionのときと同じで、動作の速度に緩急を付けるときはanimation--timing-functionを使います。
animationでこれを指定すると全てのキーフレーム間の速度がそのようになりますが、フレームごとに設定することも可能です。例えば0％のときにのみ
animation-timing-function:linear;を指定し、それ以外は設定しないことでデフォルトの
animation-timing-function:easeが設定されます。「-timing-function」のデフォルトが「ease」って、アウトプットには記述していなかったので初耳のような？習ったけど忘れているのかもしれませんね。
⑦animationの一括指定プロパティ
⑧アニメーションを使ったボタン装飾
【プログラミング独学28日目】わからなかったこと・調べてわかったこと
今日のレッスンでよくわからなかったところは以下です。
アニメーションの終了地点設定と繰り返し設定を両方書くとどうなる？
.box {
animation-fill-mode:forwards;
animation-iteration:count:2;
}上のように「アニメーションを終了地点のまま留めておいてほしい」という指定と、「アニメーションを2回繰り返す」という記述を両方書くとどうなるのか気になりました。実際に記述してみると、2回目のアニメーションが終わった後終了地点で留まっていました。複数回繰り返すアニメーション全体を1としてとらえ、その最後でanimation-fill-modeが適用されるということですね。考えれば当然のことのようですが、すっきりしました。
独学に限界を感じたら、プログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。
▼完全無料のプログラミングスクール