CSSアニメーション 作り方。







新コーナー。

こんにちは、「ふ」です。
このたびwebアニメーション入門者向けに、CSSアニメーションのコーナーを設けました。
番号順に読み進めれば、CSSアニメーションの基本かつ深い部分も習得できる。そのようなコンセプトで記事を追加していきます。

基本編。


CSSアニメーションは初めて!
でも大丈夫です。
「基本」のさらにその前のところから、サンプルを交えて紹介していきます。


 

基本的なアニメーションの実装。

▶︎ CSSアニメーションの仕組みを知る。

▶︎ 最小構成のアニメーションを作ってみよう。


 

キーフレームについて。

▶︎ はじめと終わりの省略。

▶︎ 複数のプロパティ。


 

プロパティ概要と一括指定。

▶︎ 必須のプロパティ3つ。

▶︎ ショートハンド記述上の注意。


 

animation-delay。

▶︎ 開始を遅らせるプロパティ。

▶︎ 全体の時間はどーなる?

▶︎ 使いどころは?


 

animation-timing-function。

▶︎ 初期値は一定ではない!

▶︎ 定番の値5つ。


 

cubic-bezier。

▶︎ 3次ペジェ曲線とは?

▶︎ 任意の変化曲線を指定する。


 

steps。

▶︎ コマ送りアニメーションの実装。

▶︎ timing-functionとキーフレームの関係。


 

animation-direction。

▶︎ CSSアニメーションの再生方向を指定。

▶︎ アニメーションを順再生/逆再生/交互に再生。


 

animation-fill-mode。

▶︎ アニメーション終了時の状態を維持。

▶︎ 他のプロパティとの兼ね合い。


発展系。


CSSアニメーションを習得したあとは。
JavaScriptやSVGを利用して更にリッチでお洒落なwebアニメーションを展開しましょう。


CSSアニメーション、発火のタイミングを制御する。

〽️ 好きなタイミングで発火/消火。


要素が画面内に表示されたらアニメーション、Intersection Observer。

〽️ コピペで試してみてね。


SVGでWeb Animations API。

2020.11.12
〽️ ネイティブJavaScriptでのアニメーション。




「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。