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。

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

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


 

animation-play-state。

▶︎ アニメーションの一時停止と再開。

▶︎ 外部アクションによるコントロール。


CSSアニメーション、中間テスト。

2021.06.03
基本編を終えたらチャレンジしましょう。


transition。


「transition」とは、もう1つのCSSアニメーションです。
指定した時間に沿って、要素のプロパティを連続的に変化させます。

 

CSSのtransitionについて①。

▶︎ transitionの基本的仕組みと使いかた。

▶︎ キーフレームアニメーションとの使い分けは?


 

CSSのtransitionについて②。

▶︎ 4つのtransitionプロパティ。

▶︎ 一括指定とその応用。


スマホでのhoverを考える。

2021.07.01
4つのパターンで検証。


transform。


transformプロパティには、CSSアニメーションに必要な動きが豊富に用意されています。

 

transform概要。

▶︎ transformで、できること。

▶︎ 実装にあたって必要なスキルは?


 

transform-origin。

▶︎ transformの基準点を変更する。

▶︎ 「変形の基準」とは?


 

rotate(回転)。

▶︎ X/Y/Z軸に対して要素を回転させる。

▶︎ rotateを使ったサンプル集。


 

scale(拡大縮小)。

▶︎ scaleの使いどころ。

▶︎ 要素を反転させる。


 

translate(移動)。

▶︎ translateの使い方と注意点。

▶︎ エンドレスに画像を流す。


 

skew(傾斜)。

▶︎ skewの基本的な使い方。

▶︎ 背景のみ動かすサンプル。


transform:skewの仕組みを理解する。

2021.08.27
5つの法則が存在します。


 

transfromの複数指定。

▶︎ 記述上の注意。

▶︎ 掛け合わせたときの動きについて。


CSSアニメーション、期末テスト。

2021.09.12
transform/transitionのスキル。


発展系。


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


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

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


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

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


SVGでWeb Animations API。

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




「ふ」です。

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