アニメーションの設定においてイージングとデュレーションは大事です。この2つのパラメータを調整することで、アニメーションの印象が大きく変わります。

イージング

イージングはアニメーションの進行度合い示すものです。イージング関数と呼ばれる数式で表されます。たとえば、ease-outは最初は速く、最後は遅くなるイージングです。逆にease-inは最初は遅く、最後は速くなるイージングです。

自分はいつも下記サイトでイージング関数を確認しています。

CSSではtransition-timing-functionプロパティやanimation-timing-functionプロパティがイージングの設定になります。この初期値はeaseですが、変化が弱めの関数なので、あまりメリハリのないアニメーションになりがちです。アニメーションの印象を変えたい場合は、イージング関数を個別に設定するのをオススメします。

とりあえずeaseOutQuartあたりをつけておくのが無難かなと思います。

イージングのつけかたは下記記事が参考になります。

デュレーション

デュレーションはアニメーションの継続時間です。一般的には短い時間のほうがシュッと、長いとゆったりとした印象になります。イージングとの組み合わせ次第でアニメーションの印象は大きく変わってきます。0.1秒の違いでも結構印象は変わるので、細かい調整が必要です。

デュレーションはプロパティごとに別の時間にすることもあります。動きながら出現する系の場合、oapcityとtranslateのデュレーションを変えることもあります。イージングにもよりますが、oapcityの継続時間が長いと透明時間が長いのでtranslateの動きが分かりにくいことがあります。その場合、opacityのデュレーションを短くすることで、translateの動きを強調することもあります。

ほかにも、アニメーションの発生の遅延（ディレイ）を加えることでアニメーションの関係性を調整することもあります。

まとめ

イージングとデュレーション、およびディレイ次第でアニメーションの印象は大きく変わります。自分はいつもこの調整に時間を溶かしてしまいます。もっと早くバシッと決められるようになりたいですね。