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

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のtransition, transformanimationを組み合わせて作成されているので、それらを変更すれば自分好みの動きにもできると思います。

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

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" />

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

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

Posted on

Category : Tips

Close the search window,
please press close button or esc key.