CSS/JSでここまでできる!美しいアニメーション10選

MILKMAN

モノづくりのヒントになるような記事をお届けします。

HTMLやCSS、JSのコードとその実行結果を共有できるサービスのCodePenは、いわばフロントエンドエンジニアの遊び場です。中にはどういったコードで動いているか見当もつかないようなものもあります。

今回はCodePenで公開されているアニメーションの中でも、思わず見入ってしまうような美しいアニメーションを10点ピックアップしてご紹介します。画像の下のCodePen埋め込み部分で「Run Pen」で実際に動かして見て下さい。

[under construction]

anigif01

See the Pen [under construction] by Lucas Bebber (@lbebber) on CodePen.

Cloudy Spiral CSS animation

anigif02

See the Pen Cloudy Spiral CSS animation by Hakim El Hattab (@hakimel) on CodePen.

Pixel Particles

anigif03

See the Pen Pixel Particles by Szenia Zadvornykh (@zadvorsky) on CodePen.

Canvas Light Explosion

anigif04

See the Pen Canvas Light Explosion by Jack Rugile (@jackrugile) on CodePen.

The wriggle sphere

anigif05

See the Pen The wriggle sphere by yoichi kobayashi (@ykob) on CodePen.

Three.js CanvasRenderer Experiment

anigif06

See the Pen Three.js CanvasRenderer Experiment by Sean Dempsey (@seanseansean) on CodePen.

THREE Image Transition

anigif07

See the Pen THREE Image Transition by Szenia Zadvornykh (@zadvorsky) on CodePen.

3D Rings Rotation

anigif08

See the Pen 3D Rings Rotation by Nicolas Daniel (@nicolasdnl) on CodePen.

Mesmerizing

anigif09

See the Pen Mesmerizing by xposedbones (@xposedbones) on CodePen.

SVG Low PolyLion: Animated Polygons

anigif10

See the Pen SVG Low PolyLion: Animated Polygons by GRAY GHOST (@grayghostvisuals) on CodePen.


イベント