Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

寿司で学ぼう!CSSアニメーション

あけましておめでとうございます。新年一発目の記事です。書き初め・・・というのでしょうか?

挨拶はこれくらいにして記事に入ります。みんな🍣大好きですよね?僕も大スシです。そんなみんな大好き🍣でCSSアニメーションを学んでみましょう。

まずはオーソドックスな直線運動

とりあえず直線運動をさせます。まあジャブ代わりです。

See the Pen qGNyEG) on CodePen.

解説すると、@keyframesで動きを指定して、その@keyframesanimation-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.

というかこれ🍣回転させなくてもよくね?と気がついたので回転しないバージョンも上げておきます。

宇宙🍣

最後にお遊びで今回つくったやつを並べてみました。もはや僕すらどれがどれなのかわかりません。

See the Pen ZNOjOM) on CodePen.