Créez des effets d'animation avec votre case à cocher avec Checkbox.css

Dans un article récent, j'ai couvert une bibliothèque d'animation amusante pour des boutons radio personnalisés, alimenté par CSS.

Cette bibliothèque gratuite a été libérée par 720kb et a rapidement vu un alternative de suivi appelée Checkbox.css. Cela fonctionne de la même manière, sauf que restyle et anime les cases à cocher HTML.

Cette bibliothèque est une suite de bibliothèques avec trois fins distinctes:

1. Radiobox.css - animations radio personnalisées
2. Checkbox.css - animations personnalisées
3. Checked.css - Styles et animation des éléments sélectionnés existants (radios et cases à cocher)

Celles-ci sont toutes développées par la même équipe et fonctionnent de manière similaire. Mais vous aurez besoin de inclure chaque bibliothèque individuellement si vous voulez obtenir les effets complets.

Jetez un coup d'œil au GitHub Checkbox.css pour voir certaines de ces fonctionnalités et leur fonctionnement. Par défaut, ils comptent sur Transformations 2D avec des transitions CSS, en fonction de la prise en charge du navigateur.

Aucune de ces bibliothèques n’est fournie avec les méthodes de secours JS, elles ont donc ne fonctionne que pour les animations CSS. Mais, un coup d’œil sur la page de démonstration devrait vous donner le plaisir d’ajouter ces animations à votre page..

Le processus ne pourrait être plus simple et cela nécessite peu ou pas de connaissances en codage (bien qu'il soit toujours utile d'en avoir).

Une fois que la feuille de style CSS est sur votre page, ajoutez simplement une classe à votre case à cocher avec le format case à cocher-x où le “X” représente l'animation que vous voulez. Par exemple, voici le code pour le “saut” effet d'animation:

La meilleure partie est de savoir comment cette bibliothèque peut travailler en conjonction avec le format de bouton radio, aussi. Je recommanderais certainement la bibliothèque Checked.css si vous voulez animer des éléments sélectionnés existants.

Ne laissez pas toutes ces dépendances vous effrayer. Quasiment tout le monde peut configurer la bibliothèque Checkbox.css ou l’une des bibliothèques associées., tout à partir de zéro avec un petit copier / coller.

Et si vous avez des questions ou des suggestions sur ce pack de bibliothèques d’animation d’entrée, essayez de contacter les créateurs par l’intermédiaire de leur site ou sur Twitter @ 720kb_.