【プログラミング独学26日目】アニメーション
こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。
私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。
https://chanmk.tokyo/programming_1/今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。
- プログラミング案件も受注できるようになりたい
- 歯科衛生士エンジニアを目指したい
- コーディングもライティングもできる歯科衛生士
【プログラミング独学26日目】学んだこと
今日もCSSの続きをやりました。今日は夜しか時間が取れず、インプット・アウトプット量はかなり少ないです。本業のライター業が立て込んでおり、26日間連続で続けてきたプログラミング独学を一度お休みにしようと思いました。ただほんの1レッスンだけでも、ほんの5分だけでもやはり継続しようと思いなんとかこの記事を書けています。
また昨日の記事でも書いたコーディング練習サイトですが、夫がAdobe Creative Crowdを持っていました！！！夫は動画クリエイターなので、Adobe XDは今のところ使っていないそうです。ということで有料購入しなくても使えることが判明しました。良かったです。
①アニメーション／transitionの時間を調節する
.box {
width:100px;
height:100px;
transition-property:transform;
transition-duration:1s;
transition-delay:1s;
}以前から記述していた「transition-duration」はアニメーションの動作にかける時間の指定で、今回記述した「transition-delay」はアニメーションが始まるまでの時間を指定します。上のように記述すると、1秒経ってからアニメーションが始まるようになります。
なお「transition-duration」は、UIデザインでは0.3秒がちょうど良いとされています。
②アニメーション／transition-timing-function
transtion-timing-functionは、アニメーションの動作の速度に緩急を付けるためのプロパティです。指定には以下のようなものがあります。
- ease：ゆっくり速度を上げていきゆっくり速度が落ちる動き
- ease-out：初め速くゆっくり速度が落ちる動き。図形などUI部品が小さいときに使われる（例：アラート表示）。
- ease-in-out：動き出しがゆっくりな動き。大きなUI部品で使われる（例：画面端から出てくるドロワーメニュー）。
- linear：初めから終わりまで速度が一定の動き。回転するUI部品などで使われる（例：ローディングアイコン）。
【プログラミング独学26日目】わからなかったこと・調べてわかったこと
今日はインプットが少なかった分つまずくこともありませんでした。
ただ独学に限界を感じたら、プログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。
▼完全無料のプログラミングスクール