チェックボックス選択時のアニメーションを追加することができる「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ファイルを読み込んでクラスを指定するだけなので、簡単に使うことができますね。フォームのチェックボックスにちょっとした動きを加えて、オリジナリティを出したい時にぜひ！