この記事は FIXER Advent Calendar 2020 (https://adventar.org/calendars/5752) 22日目の記事です。

もうすぐクリスマスですね！クリスマスシーズンはイルミネーションやマーケットなどで溢れてて幸せな気持ちになります。私は一年のイベントの中でクリスマスが一番好きです！（TMI）

さてさて、最近の業務でCSSでアニメーションを作ることが多かったため、備忘録も兼ねてさらっとまとめたいと思います。（あくまでさらっと）

＠keyframesでアニメーション実現

CSSでアニメーションを実現するには様々な方法があります。今回は @keyframes でアニメーションを作っていこうと思います。

@keyframes はアニメーション開始から終了までの一連の流れを制御できます。中間ステップも細かく指定することができるので、より滑らかなアニメーションが実現できます。デモで詳細を見てみましょう。

See the Pen DEMO by shiro (@ailohago) on CodePen.

animation-name で指定した名前と @keyframes の名前が一致していれば、アニメーションが適用可能です。

Square1のようにアニメーション開始時（ from ）から終了時（ to ）のCSSプロパティを指定することもできますし、Square2のようにパーセンテージで開始時（ 0% ）、終了時指定（ 100% ）することもできます。個人的には複雑なアニメーションにもできるのでパーセンテージがおすすめです。

また、Square2のように animation-name や animation-duration を省略して animation と書くこともできます。今回のデモのように指定するプロパティが少なければ省略して書いても良さそうですね。

アニメーション付きのハンバーガーメニュー作ってみた

Squareデモの応用として、@keyframesを使ってハンバーガーメニューを作りました。以下にハンバーガーデモとコードを載せます。さっきのSquareデモより少し複雑になりましたが、意外と簡単にアニメーション付きのハンバーガーメニューができました。

See the Pen PoGKVvJ by shiro (@ailohago) on CodePen.

終わりに

今回は @keyframes を使ってアニメーションを実現してみました。デモでお見せした方法以外にもいろいろな方法があるので、気になった方は是非試してみてください！
それでは、メリークリスマス！良いお年を〜。