信頼はずっと、挑戦はもっと。

お問い合わせ
TEL:03-3496-3888

BLOG コアテックの社員ブログ (毎週月曜~金曜更新中)

2018

25

12月

UIで使いたいさりげないアニメーション

テクログ

こんにちは、なかむです。


今日はクリスマス!

好きなクリスマス映画は『グレムリン』です!




ギズモかわいい(;´Д`)



今後UIで使いたいさりげないアニメーションを集めてみました。

アクションがどういう動きをするのかイメージできるようなさりげないアニメーションです。



◆Download SVG Interaction



https://codepen.io/andreasstorm/pen/aGqNJR


ダウンロードのかわいい動き


◆Switch Button Micro Interaction

https://codepen.io/montechristos/pen/QOeqqp


スイッチを切り替えた時に飛び散る


◆download button animation

https://codepen.io/indaFaust/pen/yXypKM


ダウンロードから開くまでの一連の動き


◆Range slider animation

https://codepen.io/fstgerm/pen/XyWGZB


切り替えた数字がパラパラ動く


◆Totally original micro-interaction

https://codepen.io/Schlipak/pen/vXkYpp


クリックしたアイコンが華やか


◆cloud upload

https://codepen.io/ainalem/pen/gjPdRJ


アップロードから完了までのアニメーション


◆Add media button and menu - micro interaction

https://codepen.io/pedrofernando/pen/QZxPKw


メディアを追加するアニメーション


◆Play Button UI



https://codepen.io/jordankelly/pen/GBeGpd


動画再生のアニメーション



ただただ、クリックしたりアップロードしたりするだけだと味気ない感じがしますが、さりげないアニメーションがあると華やかになりますね。


今後、ちょっとしたところでさりげないアニメーションをどんどん取り入れていこうと思います!

この記事を書いた人

マスオさん

なかむ

所 属:
WEBインテグレーション事業部
出身地:
宮崎
仕事内容:
ディレクション