ContractS開発者ブログ

契約マネジメントシステム「ContractS CLM」の開発者ブログです。株式会社HolmesはContractS株式会社に社名変更しました。

頑張らずこだわるCSSアニメーション設定

CSS

こんにちは、株式会社Holmesでエンジニアをしている堀川です。

皆さんは普段フロントのインタラクションを作り込むときアニメーションにどのくらいこだわってますか？

アニメーション速度を操作するtransitionというプロパティは親の顔より見ていると思いますが、普段業務を行う中で細かいアニメーションの動作にコストをかけられない悩みがあるのではないかと思います。

そこで今回、なるべくコストをかけずにアニメーションにこだわれる animation-timing-function の使い方をご紹介させていただきます。

animation-timing-function

animation-timing-function プロパティは要素にキーフレームアニメーションを適用する場合のタイミングや進行を指定することが出来ます。

代表的な値

ease

アニメーションの中央に向けて変化量が増加し、最後に向けて減少します。

linear

等しい速度でアニメーションします。

ease-in

アニメーションの変化の速度はゆっくり始まり、終了まで加速します。

ease-out

アニメーションは速く始まり、速度を落としながら続きます。

ease-in-out

プロパティのアニメーションはゆっくり変化し、速度を上げ、また速度を落とします。

使用例

HTML

<body>
  <div class="animation ease">ease</div>
  <div class="animation linear">linear</div>
  <div class="animation ease-in">ease-in"</div>
  <div class="animation ease-out">ease-out</div>
  <div class="animation ease-in-out"> ease-in-out</div>
</body>

CSS

.animation {
  animation-name: anime;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  background-color: gray;
  color: white;
}

.ease {
  animation-timing-function: ease;
}

.linear {
  animation-timing-function: linear;
}

.ease-in {
  animation-timing-function: ease-in;
}

.ease-out {
  animation-timing-function: ease-out;
}

.ease-in-out {
  animation-timing-function: ease-in-out ;
}

@keyframes anime {
  0% {
    width: 100px;
    height: 50px;
  }
  100% {
    width: 600px;
    height: 50px;
  }
}

実行結果

f:id:j-horikawa:20210217101535g:plain

アニメーションを楽に設定したい

f:id:j-horikawa:20210217095631p:plainまずイメージに近い animation-timing-function の値を予め設定してChrome DevToolsで要素を確認してください。

animation-timing-function の値にアイコンが付いています、そちらをクリックすると cubic bezier editor が開きます。

f:id:j-horikawa:20210217095737p:plain

左の3つはベジェ曲線の基本型を選択するもので、下はそこから複数のパターンを選択できるのでお気に入りのイージングが見つかるでしょう。

イージング関数のチートシートもあるのでこちらも参考にしてみてください https://easings.net/ja

アニメーションをもっと細く設定したい

そんな貪欲なあなたにはイージングを細かく設定できるcubic-bezierをおすすめします。

f:id:j-horikawa:20210217100324p:plain

cubic bezier editorでは紫色の丸を動かすことによってアニメーションの微調整が行えます。

調整を行うとイージング名が表示されていたところがcubic-bezier(?,?,?,?)形式に変わるはずです、その値をそのまま適用したい animation-timing-function に設定してみましょう。

.custom {
  animation-timing-function: cubic-bezier(0.9, 0.54, 0, 0.83)
}

いかがでしたでしょうか？ 適用したいイージングをチートシートで見つけて、細かい調整をChrome DevTools上で行うことによってご機嫌なアニメーションライフがおくれることでしょう。

最後に

Holmesはエンジニア・デザイナーを募集しています。 共にプロダクト作りを通して、社会・組織を良くしていきましょう！ 興味がある方はぜひこちらからご連絡ください！

lab.holmescloud.com

lab.holmescloud.com