WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： とみー
カテゴリー： マークアップ >CSS

コーディングをしていて、簡単にhoverエフェクトなど実装したいと思ったことはありませんか？
今回はコピペで実装できるのに汎用性が高い「CSS Animo」を紹介したいと思います。

「CSS Animo」の使用方法1

「CSS Animo」にアクセス

「CSS Animo」にアクセスします。

CSS Animoにアクセスするとこのような画面になっています。

CSS Animoの使用方法2

アニメーションをhoverしてみて、使用したいアニメーションをクリックしてコピーする

主にhoverとローディング用のCSSアニメーションになるのですが、汎用性が高いものが揃っているので好きなものをhoverしてみて下さい。

その中で気に入ったアニメーションをクリックしてCSSファイルにペーストします。

HTMLファイルのアニメーションを使用したい要素にclass名を付与する

CSSファイルにコピー出来たら、HTMLファイルのアニメーションを使用したい要素にclass名を付与して下さい。
（今回だと「animoBorderMarker」というclass名になります。）

これだけでアニメーションを実装することが出来ました。

まとめ

今回はコピペで実装できるのに汎用性が高い「CSS Animo」をご紹介しました。
操作もクリックするだけの簡単操作で、コピペしたものを編集してオリジナルのアニメーションを作ることも出来るのでおすすめです。
まずは、コピペで使用してみてから応用してみて下さい。