CSS
ボタンやアイコンに様々なアニメーションを加えるCSSを生成できるサイト
2021年06月23日 8:00
こんにちは！社員Kです。
本日は、ボタンやアイコンに様々なアニメーションを加えるCSSを生成できるサイトのご紹介です。
ui interactions にアクセス
まずは下記のサイトにアクセスします。
https://ui-interactions.raphaelfabeni.com/
よくあるアニメーションアイコンの中から使いたいものを選ぶ
下記のようにすでに何パターンかのアニメーションアイコンが用意されています。
ハンバーガーメニューや矢印アイコン、プラス・マイナスマークのアニメーションなど、よく使いそうなものが、あらかじめ用意されています。
その中から使いたいものを選び、HTMLとCSSをコピーするだけ！
簡単JSでclassを切り替えてアニメーションさせる
アニメーション状態の切り替えには「is-active」というclassを使います。
下記のような簡単なJSで実装できます。
いかがでしたでしょうか？
とても簡単にアニメーションアイコンを実装できると思います。
こちらの記事もおすすめ↓
関連記事
この記事を書いた人
社員K
福岡でWebプログラマー・フロントエンドエンジニアとして10年目。まだまだ勉強することが沢山あるなぁと最近良く思います。日本語には自信があります。すぐに効くダイエット情報募集中！
