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

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

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

[under construction]

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

Cloudy Spiral CSS animation

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

Pixel Particles

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

Canvas Light Explosion

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

The wriggle sphere

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

Three.js CanvasRenderer Experiment

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

THREE Image Transition

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

3D Rings Rotation

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

Mesmerizing

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

SVG Low PolyLion: Animated Polygons

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