要素のプロパティに変更が加えられると、ブラウザは、その変更の影響を受けるすべての要素のサイズと位置を計算しなくてはなりません。たとえば、相対的な位置設定がしてある要素の位置が変わると、他の子要素や親要素に影響が及ぶことに […]
続きを読む日: 2018年6月20日
6_1 ブラウザがWebページを表示するまでの仕組み
快適なアニメーションにするには、ブラウザがアニメーションを画面に表示する仕組みを知っておいて損はありません。以下が概略図と説明です。 読み込んだHTMLとJavaScriptを解析してDOMツリーを構築する。 読み込んだ […]
続きを読む6 アニメーションのパフォーマンスを上げる
「1_1 アニメーションとは？」では、人間は本来的にアニメーションが好きなのだ、ということを述べましたが、これは正確ではありません。よくできたアニメーションは好きですが、できの悪いものは逆効果で、不快になるでしょう。 よ […]
続きを読む5_2 離散関数
CSS AnimationsとCSS Transitionsのタイミング関数には、出力される値が途切れる離散関数も指定できます。指定にはsteps()関数を使用します。 steps( number_of_steps, d […]
続きを読む5_1 連続関数
タイミング関数のうち、値が途切れずに変化しつづける関数を連続関数と言います。以下はCSSアニメーションに使用できる連続関数の一部です。 linear 定速 ease 最初加速し、だんだん減速 ease-in だんだん加速 […]
続きを読む5 タイミング関数
タイミング関数は別名イージング関数とも呼ばれ、CSS AnimationsやCSS Transitionsアニメーションを作成するとき、animation-timing-functionやtransition-timin […]
続きを読む