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の基準点を変更する。

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


発展系。


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


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

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


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

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


SVGでWeb Animations API。

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




「ふ」です。

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