あけましておめでとうございます。新年一発目の記事です。書き初め・・・というのでしょうか？
挨拶はこれくらいにして記事に入ります。みんな🍣大好きですよね？僕も大スシです。そんなみんな大好き🍣でCSSアニメーションを学んでみましょう。
まずはオーソドックスな直線運動
とりあえず直線運動をさせます。まあジャブ代わりです。
See the Pen qGNyEG) on CodePen.
解説すると、@keyframesで動きを指定して、その@keyframesをanimation-nameプロパティを使って要素に適用します。アニメーションの経過をパーセントで指定することがポイントです。
回転🍣
いよいよ回転させましょう。
See the Pen ZNOjbj) on CodePen.
え？回転のさせ方が違うって?仕方ないなぁ。直しましょう。
外周🍣
さきほどは🍣自体が回転してしまいました。今度は🍣を外周させてみます。
See the Pen byejER) on CodePen.
え？🍣も一緒に回転してしまっていておかしいって？注文が多いですね。では🍣自体も回転させつつ外周させましょう。
外周する回転🍣
See the Pen EzypPr) on CodePen.
外周する方向と逆方向に回転させることで常に🍣をまっすぐにしています。これで完璧です。え？回転🍣はそもそもレーンに沿ってるんだからそういう動きじゃないって？
回転🍣屋の回転🍣
🍣をレーンに沿って動かしてやります。
See the Pen GaqBZq) on CodePen.
寿司の向きが変わらなくてなんだかぎこちないです。さらに改良しましょう。
改善した回転🍣屋の回転🍣
🍣単体でアニメーションするのは難しいので、🍣の外枠を動かしつつ🍣自体も回転させることで自然な動きにしています。
See the Pen mYEjEP) on CodePen.
というかこれ🍣回転させなくてもよくね？と気がついたので回転しないバージョンも上げておきます。
宇宙🍣
最後にお遊びで今回つくったやつを並べてみました。もはや僕すらどれがどれなのかわかりません。
