ラジオボタンとチェックボックスの選択時アニメーションをCSSで実装する「Radiobox.css」と「Checkbox.css」

  • Posted on
  • Category : Tips
ラジオボタンとチェックボックスの選択時アニメーションをCSSで実装する「Radiobox.css」と「Checkbox.css」

面白い動きも幾つかあったのでご紹介。「Radiobox.css」と「Checkbox.css」はそれぞれラジオボタンとチェックボックスの選択時にアニメーションを加えることができるスタイルシートです。全体的にこれどんな場面で使うのっていう感じのエフェクトが多いので普段のサイトではあまり使われなそうですが、ちょっと遊び心いれたいとか変わったアニメーションを付けたい時には便利かもしれません。

Radiobox.css

Radiobox.css

「Radiobox.css」はラジオボタン選択時にアニメーションを付けることができるCSSで、小刻みに動くTremolo、跳ねるBoing、回転するWheelなど全12種類のアニメーションがあります。
アニメーションの適用は簡単で、該当のCSS(radiobox.min.css)を読み込み、あとは<input type="radio" /> に特定のクラスを記述するだけです。
例えば、Boingエフェクトはクラスが「radiobox-boing」となるので以下のように記述します。

HTML

<input type="radio" class="radiobox-boing" />

もう少し動きやスピードを調整したい場合などは、それぞれアニメーションはCSSのtransitiontransformanimationを組み合わせて作成されているので、それらを変更すれば自分好みの動きにもできると思います。

実際の動きや詳細については以下より確認できます。

Checkbox.css

Checkbox.css

「Checkbox.css」はチェックボックス選択時にアニメーションを付けることができるCSSで、少し位置がずれるAway、くるっと回るRotate、一瞬拡大する動きのSplashなどこちらも全12種類のアニメーションがあります。
同じくアニメーションの適用は該当のCSS(checkbox.min.css)を読み込み、あとは<input type="checkbox" /> に特定のクラスを記述するだけです。
例えば、Splashエフェクトはクラスが「checkbox-splash」となるので以下のように記述します。

HTML

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

こちらもアニメーションはtransitiontransformなどで作成されているので、変更すれば自分好みの動きにもできると思います。

実際の動きや詳細については以下より確認できます。

Back to Top

ラジオボタンとチェックボックスの選択時アニメーションをCSSで実装する「Radiobox.css」と「Checkbox.css」

ラジオボタンとチェックボックスの選択時アニメーションをCSSで実装する「Radiobox.css」と「Checkbox.css」

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。