初めまして、今年度入社しましたまっすーです！
初めてのブログの執筆に対して何を書こうか迷いましたが、今回は僕の好きなアニメーションについて書いていきます。
簡単にアニメーションが実装できるので、ぜひお読みください！
keyframesって？
keyframesを書いてみる
keyframeの枠組み
これらのプロパティを使いこなせば、簡単に実装ができます！animation-name:
animation-duration
要素が指定したアニメーション１回分にかける時間の長さを指定するときに使用します。
3秒にしたい時は3sと書きます。初期値は0
例）3s
animation-timing-function
要素にアニメーションを適用させる場合にタイミング・進行を指定します。
アニメーションが継続しているときに速度を調整し滑らかにすることができます。
これはベジェ曲線で表されることが多いのですが、割愛します。（ごめんなさい...）
指定方はいくつかあり紹介します。
| ease | 開始と終了を滑らかにする（初期値） |
| linear |
一定の速度 |
| ease-in |
ゆっくり開始 |
| ease-out |
ゆっくり終了 |
| ease-in-out |
ゆっくり開始、ゆっくり終了 |
animation-delay
要素にアニメーションを適用させた後に次のアニメーションが始まるまでの時間を指定します。
時間の指定なので、animation-durationと同じように指定します。初期値は０
例）1s
animation-iteration-count
要素のアニメーションを繰り返す回数を指定します。
指定法が数値かinfiniteを指定できます。数値はその回数分繰り返し、infiniteは無限に繰り返しを行います。
多くは数値指定をしないと思うので、infiniteで大丈夫だと思います！
| 数値 | 回数分繰り返す |
| infinite | 無限に繰り返す |
animation-direction
要素のアニメーションを再生する方向を指定します。
指定法はnormalとalternateがあり、normalは一定方向に繰り返します。alternateは逆再生が可能になります。
| normal | 一定方向の再生 |
| alternate | 逆再生 |
@keyframes ~~~
最後にアニメーションの実際の挙動を設定する物です。
多くはtransformで動かしたり、opacityで消したり表示したり、長さ高さを変えたやり方があります。
サンプルにある0%と100%とは、0%が開始値100%が終了値を表し、その値のときの位置を指定できます。
%のほかに、from、toがありますが意味合いは同じです。
また途中でも変化が欲しい時は50%などの数値もいれることが可能なのです。
プロパティをまとめてみる
いくつか上げてきたプロパティですが、何行も書くのって正直めんどくさいですよね！
実はこれ、まとめることができるんです！
animation: name 3s ease 1s infinite normal;
とまとめることができます！これで複数行書かずに済みますね笑
実際に使えるkeyframesを紹介
スクロールのアニメーション。
ちょっとしたローディングアニメーション
まとめ
Udemyを実際に体験した方の感想記事もぜひご覧ください♪
- 【体験談】主婦が「自宅で働きたい」を叶えるために、広告バナー制作を学んでみた
- 【体験談】全くの初心者がUdemyでモーショングラフィックスを学んでみた
- 【体験談】Udemy「みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習」を実際にやってみた感想
- 【体験談】無料！？Udemyで学ぶはじめてのAI（ディープラーニング、機械学習）
- 【体験談】UdemyでWeb開発を学びました【コスパ最強】
