Checkbox.cssを使用して独自のチェックボックスアニメーション効果をスタイルする

最近の投稿で、カスタムラジオボタン用の楽しいアニメーションライブラリを取り上げました。, CSSによって供給.

その無料ライブラリーは720kbによって解放されてすぐに Checkbox.cssという追加の代替案. それ以外の点では、これは同じように機能します。 HTMLチェックボックスの再調整とアニメーション化.

このライブラリは、次のものを含む一連のライブラリとして提供されています。 3つの異なる目的：

これらはすべて同じチームによって開発されており、同じように機能します。しかし、あなたはする必要があります 各ライブラリを個別に含める あなたが完全な効果を得たいならば.

Checkbox.css GitHubを見て、これらの機能のいくつかとそれらがどのように機能するのかを確認してください。デフォルトでは、 CSSトランジションに伴う2D変換, ブラウザのサポートによります.

これらのライブラリにはJSフォールバックメソッドが付属していないため、実際には CSSを使用したアニメーションでのみ動作します. しかし、デモページを一目見れば、これらのアニメーションを自分のページに追加できてうれしいです。.

プロセスはもっと単純ではない コーディングの知識がほとんどない （いくつか持っているのはいつも便利ですが）.

CSSスタイルシートがページに表示されたら、チェックボックスに次の形式でクラスを追加します。 チェックボックス-x どこ “バツ” 好きなアニメーションを表します. たとえば、これは次のコードです。 “ジャンプ” アニメーション効果：

最良の部分は、このライブラリがどのようにできるかです。 ラジオボタンの形式と連携して動作する, も。あなたがしたい場合は私は間違いなくChecked.cssライブラリをお勧めします 既存の選択した要素をアニメートする.

これらすべての依存関係があなたを怖がらせないでください。ほとんど誰でもCheckbox.cssライブラリまたは任意の関連ライブラリを設定できます。, 小さなコピーと貼り付けですべてを最初から.

そして、この一連のインプットアニメーションライブラリについて質問や提案がある場合は、そのサイトを通じて、またはTwitter @ 720kb_を通じてクリエイターにメッセージを送ってください。.