【UIデザイナー必見】動きが面白い！目を引くこと間違いなしのCSSアニメーション集part2

以下記事の続編です。

2018年6月26日【UIデザイナー必見】動きが面白い！目を引くこと間違いなしのCSSアニメーション集part1

個人的にはスターウォーズのトグルアイコンが、小ネタが入っていて面白いなと思いました。
遊び心のあるデザインって面白いですよね。

前回に引き続き今回も面白いアニメーションが盛りだくさんです。
ぜひ気に入ったアニメーションをサイト制作で取り入れてみてください。

Cruisin’

See the Pen <a target="_blank" href="https://codepen.io/yy/pen/YPjEZw/" rel="noopener noreferrer">Cruisin’</a> by Yusuf (<a target="_blank" href="https://codepen.io/yy" rel="noopener noreferrer">@yy</a>) on <a target="_blank" href="https://codepen.io" rel="noopener noreferrer">CodePen</a>.

3d css cube wave

See the Pen <a target="_blank" href="https://codepen.io/waddington/pen/ucCIF/" rel="noopener noreferrer">3d css cube wave</a> by Kai Waddington (<a target="_blank" href="https://codepen.io/waddington" rel="noopener noreferrer">@waddington</a>) on <a target="_blank" href="https://codepen.io" rel="noopener noreferrer">CodePen</a>.

Signature animation

See the Pen <a target="_blank" href="https://codepen.io/drygiel/pen/KbhmA/" rel="noopener noreferrer">Signature animation</a> by Damian Drygiel (<a target="_blank" href="https://codepen.io/drygiel" rel="noopener noreferrer">@drygiel</a>) on <a target="_blank" href="https://codepen.io" rel="noopener noreferrer">CodePen</a>.

Animated Background Gradient

See the Pen <a target="_blank" href="https://codepen.io/quasimondo/pen/lDdrF/" rel="noopener noreferrer">Animated Background Gradient</a> by Mario Klingemann (<a target="_blank" href="https://codepen.io/quasimondo" rel="noopener noreferrer">@quasimondo</a>) on <a target="_blank" href="https://codepen.io" rel="noopener noreferrer">CodePen</a>.

Star Wars Toggle Icon Animation

See the Pen <a target="_blank" href="https://codepen.io/rss/pen/vIDKH/" rel="noopener noreferrer">Star Wars Toggle Icon Animation</a> by Rıza Selçuk Saydam (<a target="_blank" href="https://codepen.io/rss" rel="noopener noreferrer">@rss</a>) on <a target="_blank" href="https://codepen.io" rel="noopener noreferrer">CodePen</a>.

Gif Style CSS3 Animation

See the Pen <a target="_blank" href="https://codepen.io/jascha/pen/sIgAo/" rel="noopener noreferrer">Gif Style CSS3 Animation</a> by Jascha Goltermann (<a target="_blank" href="https://codepen.io/jascha" rel="noopener noreferrer">@jascha</a>) on <a target="_blank" href="https://codepen.io" rel="noopener noreferrer">CodePen</a>.

Simple focus in/out input animation

See the Pen <a target="_blank" href="https://codepen.io/fluxus/pen/xwDzB/" rel="noopener noreferrer">Simple focus in/out input animation</a> by Mirko Zorić (<a target="_blank" href="https://codepen.io/fluxus" rel="noopener noreferrer">@fluxus</a>) on <a target="_blank" href="https://codepen.io" rel="noopener noreferrer">CodePen</a>.

Chromatic triangle

See the Pen <a target="_blank" href="https://codepen.io/felipedefarias/pen/yiBjr/" rel="noopener noreferrer">Chromatic triangle</a> by Felipe de Farias (Pita) (<a target="_blank" href="https://codepen.io/felipedefarias" rel="noopener noreferrer">@felipedefarias</a>) on <a target="_blank" href="https://codepen.io" rel="noopener noreferrer">CodePen</a>.

Coffee Maker Animation

See the Pen <a target="_blank" href="https://codepen.io/thisisroger/pen/mskhL/" rel="noopener noreferrer">Coffee Maker Animation</a> by Roger Flanagan (<a target="_blank" href="https://codepen.io/thisisroger" rel="noopener noreferrer">@thisisroger</a>) on <a target="_blank" href="https://codepen.io" rel="noopener noreferrer">CodePen</a>.

Chrome Dinosaur Animation

See the Pen <a target="_blank" href="https://codepen.io/nickspiel/pen/bNdBPr/" rel="noopener noreferrer">Chrome Dinosaur Animation</a> by Nick Spiel (<a target="_blank" href="https://codepen.io/nickspiel" rel="noopener noreferrer">@nickspiel</a>) on <a target="_blank" href="https://codepen.io" rel="noopener noreferrer">CodePen</a>.

presenting CSShake

See the Pen <a target="_blank" href="https://codepen.io/elrumordelaluz/pen/pHKcC/" rel="noopener noreferrer">presenting CSShake</a> by Lionel T (<a target="_blank" href="https://codepen.io/elrumordelaluz" rel="noopener noreferrer">@elrumordelaluz</a>) on <a target="_blank" href="https://codepen.io" rel="noopener noreferrer">CodePen</a>.

Newton’s Cradle Loader

See the Pen <a target="_blank" href="https://codepen.io/AllThingsSmitty/pen/zxGyXd/" rel="noopener noreferrer">Newton’s Cradle Loader</a> by Matt Smith (<a target="_blank" href="https://codepen.io/AllThingsSmitty" rel="noopener noreferrer">@AllThingsSmitty</a>) on <a target="_blank" href="https://codepen.io" rel="noopener noreferrer">CodePen</a>.

Modal Animation Physics

See the Pen <a target="_blank" href="https://codepen.io/pix3l/pen/ajwcE/" rel="noopener noreferrer">Modal Animation Physics</a> by Tey Tag (<a target="_blank" href="https://codepen.io/pix3l" rel="noopener noreferrer">@pix3l</a>) on <a target="_blank" href="https://codepen.io" rel="noopener noreferrer">CodePen</a>.

3D walking robot

See the Pen <a target="_blank" href="https://codepen.io/P233/pen/jrguI/" rel="noopener noreferrer">3D walking robot</a> by Peiwen Lu (<a target="_blank" href="https://codepen.io/P233" rel="noopener noreferrer">@P233</a>) on <a target="_blank" href="https://codepen.io" rel="noopener noreferrer">CodePen</a>.

Cloudy Spiral CSS animation

See the Pen <a target="_blank" href="https://codepen.io/hakimel/pen/aIhkf/" rel="noopener noreferrer">Cloudy Spiral CSS animation</a> by Hakim El Hattab (<a target="_blank" href="https://codepen.io/hakimel" rel="noopener noreferrer">@hakimel</a>) on <a target="_blank" href="https://codepen.io" rel="noopener noreferrer">CodePen</a>.

コチラもオススメ

2018年6月26日【UIデザイナー必見】動きが面白い！目を引くこと間違いなしのCSSアニメーション集part1