アイコンのCSSアニメーション用便利サイト

CSSアニメーション

難しいですよね。

フェードやスライドから始まり、アイコンひとつでシンプルに処理内容を表したり、それを特定タイミングでユーザーに注目させるために、ピコピコ動かしたり、マウスオーバーで色反転したり。

少し前に比べて、簡素なサイトやアプリであってもその程度は当たり前になってきていますね。

でも、そんなインタラクティブな動き、デザイン素人にはちょっと辛いのですよ。

AfterEffectとかをバリバリ使いこなせるわけでもなく、かといってKeyFrameのパーセンテージを自力で計算するなんて 変態じみた 頭の良いことできないわけですよ。

そんな訳で最近お世話になったのが、以下のサイト

WAIT! Animate

EXAMPLEを使うだけでもアイコンに対する面白い動きを再現させることができ、CUSTOMのKeyFrames欄へKeyFrame定義をコピペすれば更に細かく変更もできます。
あとは出来上がったCSSを利用するだけ。シンプル！

出来上がったものを見て思うのは、こんな細かいパーセンテージの値、やっぱり自力で計算するなんて、やっぱり 変態 頭の良い人にしかできません・・・


サイトデザイン自体がそもそも使い勝手がわかりやすいのもステキですね。