【簡単】CSSアイコンアニメーションの作り方

【簡単】CSSアイコンアニメーションの作り方

CSSだけで作成されたアイコンを使って、アイコンのアニメーションを作ることができます。

しかも、ほぼコピペだけで作ることが可能です。

ここでは、あるアイコンからあるアイコンへ変化させるアニメーションの作り方を、実際の画面を見ながら順を追って紹介していきます。

使用するサイトのリンクは以下の通りです。
CSS ICON — project by Wenting Zhang

手順1: サイトにアクセスする

上記のリンクにアクセスし、「abimate」を選択します。

手順2: 変化させたいアイコンを2つ選ぶ

変化前のアイコンが「A」、変化後のアイコンが「B」となるので、アニメーションさせたいアイコンを2つ選びます。

そして、画面右端に現れたウィンドウ内の開始ボタンを押すと、アニメーションが実行されます。

上の画像では、よくあるハンバーガーメニューのアニメーションを作っています。

実際の挙動はこちらから

もし気に入らなければ、アイコンを選び直すだけで、簡単に再度プレビュー可能です。

採用したいものが決まれば、HTML、CSS、JSの各コードをコピーして、自分のページに貼り付けるだけで実装することができます。

アイコンのスタイルをインポートの形ではなく自作して使いたい場合は、以下の手順に沿ってください。

CSSアイコンの作り方

CSS ICONをクリックし、作りたいアイコンを選択します。

すると画面右端にコードが書かれたウィンドウが現れるので、必要な箇所をコピペして使いましょう。

おわりに

アニメーションをプレビュー画面で確認しながら作ることができるので、非常に効率的に作業できます。

また、「アイコンをSVG形式でダウンロードしてアニメーションを加えたい」という場合には、こちらの記事でおすすめのアイコン素材サイトをまとめていますので、ご活用ください。