チェックボックス選択時のアニメーションを追加することができる「Checkbox.css」

チェックボックス選択時のアニメーションを追加することができる「Checkbox.css」

チェックボックス選択時のアニメーションを追加することができる「Checkbox.css」

Checkbox.cssは、チェックボックスを選択した時にアニメーションをつけることができるCSSファイルです。先日紹介したRadiobox.cssはラジオボタンにアニメーションを追加するCSSでしたが、今回はチェックボックスにアニメーションを追加するCSSです。

実際の動きについては、以下よりご確認いただけます。

デモページを見る

Checkbox.cssの使い方

1. GitHubからファイル一式をダウンロードします。
2. ダウンロードしたファイルを解凍して、dist/css配下にあるcheckbox.min.cssをサーバーにアップロードします。
3. アップロードしたcheckbox.min.cssを以下のように読み込みます。ファイルパスは適宜変更してください。

<link rel="stylesheet" href="checkbox.min.css">

4. チェックボックスに追加したいアニメーションのクラスを指定します。例えば、splashの動きを追加したい場合は、以下のようにクラスを指定します。

<input type="checkbox" class="checkbox-splash">

追加できるアニメーションの種類は、以下の通りです。

  • Hey
  • Away
  • Inout
  • Rotate
  • Yo
  • Roll
  • Up
  • Down
  • Tv
  • Jump
  • Omg
  • Splash

あとがき

CSSファイルを読み込んでクラスを指定するだけなので、簡単に使うことができますね。フォームのチェックボックスにちょっとした動きを加えて、オリジナリティを出したい時にぜひ!

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です