Panda Noir

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

寿司で学ぶCSSアニメーション

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

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

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

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

JS Bin on jsbin.com

解説すると、@keyframesで動きを指定して、その@keyframesanimation-nameプロパティを使って要素に適用します。アニメーションの経過をパーセントで指定することがポイントです。

回転🍣

いよいよ回転させましょう。

JS Bin on jsbin.com

え?回転のさせ方が違うって?仕方ないなぁ。直し

外周🍣

さきほどは🍣自体が回転してしまいました。今度は🍣を外周させてみます。

JS Bin on jsbin.com

え?🍣も一緒に回転してしまっていておかしいって?注文が多いですね。では🍣自体も回転させつつ外周させましょう。

外周する回転🍣

JS Bin on jsbin.com

外周する方向と逆方向に回転させることで常に🍣をまっすぐにしています。これで完璧です。え?回転🍣はそもそもレーンに沿ってるんだからそういう動きじゃないって?

回転🍣屋の回転🍣

🍣をレーンに沿って動かしてやります。

JS Bin on jsbin.com

なんだかぎこちないですね。さらに改良しましょう。

改善した回転🍣屋の回転🍣

🍣単体でアニメーションするのは難しいので、🍣の外枠を動かしつつ🍣自体も回転させることで自然な動きにしています。 JS Bin on jsbin.com

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

宇宙🍣

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

JS Bin on jsbin.com