MENU

デベロッパーツールで細かい調整をしよう

目次

Chromeのデベロッパーツールでアニメーションの調整をしていきます。

  • デベロッパーツールでの確認
  • アニメーションの調整

デベロッパーツールでの確認

・アニメーションをもっと凝りたいときはデベロッパーツールで自作することもできます。

・まずは、transition-timing-function: ease-out; を指定してあげます。

・こちらの動きをデベロッパーツールで確認してみましょう。ease-out の指定を探し、そちらのアイコンをクリックするとエディターで開くことができます。

アニメーションの調整

・このグラフの見方は横軸が時間、そして縦軸が変化量になります。今回だとdurationを3 秒にしているので、開始から終了までが 3 秒、そして右に 80px 移動させているので、その範囲内で80px の移動という意味になります。

・あらかじめ用意されている設定もいくつかあって、左側から選んでみたり、もしくは下の矢印から選ぶこともできます。

・きめ細かくこちらの曲線の形を設定するための値はcubic-bezierという値を使います。

・ツールで直接いじることもできて、ちょっと癖があるのですが、丸を引っ張って、曲線を操作することができます。

・いいところまで来たら、この cubic-bezier の値をコピーしてCSSのtransition-timing-functionの値として貼り付けてあげます。

-広告-

 

 






JavaScript

この記事が気に入ったら
いいね または フォローしてね！

Follow Me
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次