任意のCSSアイコンから別のCSSアイコンへの遷移アニメーションのコードを提供する・「CSS ICON animate」

Ads

CSS ICON animate


CSS ICON animateは任意のアイコンから別のアイコンへの遷移アニメーションを、アイコンも含めて全てCSSで作れるサービスです。

以前ご紹介した、CSSのみで出来たアイコン集のCSS ICONが、各CSSアイコンからCSSアイコンへのアニメーションコードを提供するようになったみたいです。

任意のCSSアイコンを2つ選択するだけで、選んだ順にアニメーションしながら遷移するコードを発行してくれます。

Ads

example

↑ アイコンをクリックすると別のアイコンに変化します。両アイコンともCSSで作られています。

楽で良いんですが、デフォルトで用意されているのがクリックイベントで遷移するJSコードがjQueryだったりCSS ICONのCDNを@importしてたりなのでこの辺は必要に応じて便宜変更してください。

中には微妙なアニメーションもあるので違和感あるならおとなしくSVGで書いた方が良さそうですが、これはこれで割と良いんじゃないかなぁと思います。

CSS ICON animate