アニメーションをできるだけ多く把握したい。

Question

【質問事項】世の中にあるアニメーションをできるだけ多く把握するためのサイトや書籍、動画を教えてください。

【質問の背景】
半年の学習（html,css,javascript,jQuery、WordPress構築）をスクールで終えた者です。
スクール課題は制作物として成立していないと次に進めず、メンターからOKがでないと次に進めないといった内容でした。おかげで、疑問点を1から10まで質問する癖もなおり、自ら調査し解決する力も少しはついたかなぁというくらいです。

こうした私ですが、制作会社への営業を視野に入れた次の動きとして、ポートフォリオ作成とそれに載せる架空サイトを自主制作しようと考えています。これに関連して、先日次のようなことがありました。

スクール同期の受講者から相談があり、制作会社のオンライン面接であるサイトを見せられ、
「あなたがこの1ページをつくる業務を振られたときに、どのくらいの納期・単価で受託しますか？」
と問われたそうです。これまでも2度ほど同じ趣旨の話を界隈できいたことがありますが、私はこの問いに答えることができませんでした。業務を受託した経験もなければ、そのサイトのアニメーションを実装した経験もないからです。

納期を適切に想定するには、↓が必要だと思いました。
・ページ上のレイアウトの実装方法を想像できる程度のhtml,cssの経験
・ページ上のアニメーションの実装方法を想像できるcss,javascriptの実力と経験

こうした背景から、自分の自主制作では、実務でよく用いるレイアウトとアニメーションを実装し、それが実装可能であることをポートフォリオで示すとともに、作業工程を確認しつつ、数度の反復を経て素早く実装できるようにしておきたいと考えるようになりました。

ただし、レイアウトの実装・調整はデザインを見れば、html,cssをどう書けばいいのか想定できますが、アニメーションになると想定できません。これまでのスクール課題でも、サイト上にはレイアウトよりアニメーションの実装のほうが数が少ないですから、思考・経験も回数的に少ないのだと思います。

これまでのスクール課題で実装したアニメーションは以下のものです。
・メニューのホバー時に下線が右から左に走る＋opacity（透過）
・ハンバーガーメニュー
・スライド（slick）
・モーダル
・アコーディオンメニュー

以上を踏まえ、架空サイトの自主制作では、↓を考えています。
A：世の中にあるアニメーションをできるだけ多く把握
B：それらを初級⇒中級⇒上級などに分けて把握し、自主制作サイトにバランスよく散りばめて実装する

架空サイトは4つ制作します。その4つの中に全てのアニメーションがおさまるとは思いませんが、制作会社が信用するに足る数・レベルのアニメーションが含まれていれば十分と考え、Aのための動画（有料・無料含め）・サイト・書籍などをご教示いただきたいと思ったわけです。

自分の考え・方針に対し、何かご意見ございましたら、それも含め、アドバイスいただきたいです。