Help us understand the problem. What is going on with this article?

CSSアニメーションを作るときはChromeデベロッパーツールのAnimationsが便利

More than 3 years have passed since last update.

CSSアニメーションは直感的じゃないから作りづらい

CSSでアニメーションを作るとき@keyframesを使います。オブジェクトを拡大縮小するアニメーションなどは次のようなスタイルで指定します。

@keyframes scale-anime {
  0% {
    transform: scale(1);
  }

  33% {
    transform: scale(2);
  }

  66% {
    transform: scale(0.75);
  }

  100% {
    transform: scale(1);
  }
}

.el {
  animation: scale-anime 1s linear;
}

1秒間の0%、33%、66%、100%の地点のscale値を指定しているのですが、どのようなテンポでどのようなイージングでアニメーションされるのかわかりづらい。。。

CSSアニメーションを作るときはChromeデベロッパーツールのAnimationsが便利

Web開発者にはお馴染みのChromeデベロッパーツール。デベロッパーツールの機能の中に「Animations」があり、CSSアニメーションのテンポや尺(時間)を調整できます。

まずは、作成したアニメーションをChromeで表示し、デベロッパーツールを開きます。

cap1.png

デベロッパーツールが開いたら、ウィンドウの右上にある「・・・」の中にある「Show console」をクリックしてconsoleを開きます。

cap2.png

consoleが開いたら、consoleの左上にある「・・・」の中に「Animations」があるのでクリックして開きます。

cap3.png

これが「Animations」です。CSSアニメーションが動いていると、自動で一覧にしてくれます。各ポイントを移動すると、その内容が表示されているCSSアニメーションに反映されます。

cap4.png

ポイントを前の方にずらして確認。

cap5.png

感覚はつかみやすくなったか...?

アニメーションの調整は秒数やサイズを小数点レベルで調整するので、それをブラウザ上で確認できるのは効率的かと感じました。ですが、現在はアニメーションのテンポや尺の調整が主な機能なようなのでもう少し細かなパラメーターまで調整できるとうれしいですね :open_mouth:

umi_kappa
週4で阿佐ヶ谷の飲み屋で芋飲んでます。いつもいるねって言われるけど、ちゃんと仕事してますよ。JSとかアプリとかでIoTなコンテンツを作るお仕事やってます。
http://umikappa.main.jp/
iotlt
IoT縛りの勉強会です。 毎月イベントを実施しているので是非遊びに来てください! 登壇者を中心にQiitaでも情報発信していきます。 https://iotlt.connpass.com
https://iotlt.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away