codepen アニメーション特集

コードペンにあったウェブサイト作成時に参考にしたいor活用したい
アニメーションをまとめました!
軽い気持ちで覗いていってもらえると嬉しいです。

▼CSSだけ!いろいろなアニメーション

See the Pen
Only CSS: Polygon Fish
by Yusuke Nakaya (@YusukeNakaya)
on CodePen.0

See the Pen
CSS Card Hover Effects
by Jhonier Riascos Zapata (@Jhonierpc)
on CodePen.0

▼canvasをつかったアニメーション

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

See the Pen
Crowd Simulator
by Szenia Zadvornykh (@zadvorsky)
on CodePen.0

▼マウスオンで動くアニメーション

See the Pen
_ Attracted Elastic Balls _
by Jeremie Boulay (@Jeremboo)
on CodePen.0

See the Pen
_ 3D Text Animation & Sporadic Lines _
by Jeremie Boulay (@Jeremboo)
on CodePen.0

▼3dアニメーション

See the Pen
3D(ish) Product showcase
by Jamie Coulter (@jcoulterdesign)
on CodePen.0

See the Pen
Pricing – pure css – #16
by Ivan Grozdic (@ig_design)
on CodePen.0

▼おしゃれなスライダー

See the Pen
Animated Slider
by Kasper De Bruyne (@kdbkapsere)
on CodePen.0

See the Pen
eCommerce Slide Effect -> GSAP & JS
by Sebi (@DivineBlow)
on CodePen.0

See the Pen
Custom Scroll Slider
by mainserv (@mainserv)
on CodePen.0

▼着せ替え

See the Pen
Sweater Swag 👕 [CPC]
by Joshua van Boxtel (@JoshuaVB)
on CodePen.0

▼背景CSSパターン

See the Pen
Background patterns
by yuanchuan (@yuanchuan)
on CodePen.0

▼図形(丸や三角、四角)を使ったアニメーション

See the Pen
Morph SVG with KUTE.js
by thednp (@thednp)
on CodePen.0

See the Pen
Morphing loader spinner
by Mikael Ainalem (@ainalem)
on CodePen.0

See the Pen
morphing shape with spinning color stroke (svg + canvas)
by Rachel Smith (@rachsmith)
on CodePen.0

See the Pen
Shapes
by Mimo Duo (@mimoduo)
on CodePen.0

See the Pen
Explode cube to rhombic dodecahedron (pure CSS)
by Ana Tudor (@thebabydino)
on CodePen.0

▼背景に使えるアニメーション

See the Pen
GC Partners
by Aida Martinez (@aida-martinez)
on CodePen.0

See the Pen
Dynamic Geometric Background Animation
by Ricardo Oliva Alonso (@ricardoolivaalonso)
on CodePen.0

See the Pen
CSS3 background Animation
by Vubon (@vubon)
on CodePen.0

See the Pen
Jquery & CSS3 background
by enrico toniato (@enricotoniato)
on CodePen.0

See the Pen
#CodepenChallenge – Scss Loop Circles
by halvves (@halvves)
on CodePen.0

See the Pen
#CodepenChallenge – Scss Loop Hexagons
by halvves (@halvves)
on CodePen.0

See the Pen
sequence
by simon (@simonpatrat)
on CodePen.0