10 outils d’animation CSS3 à mettre en favori

Comme les gens ont tendance à percevoir plus facilement les choses qui bougent, des animations intelligemment utilisées peuvent améliorer l'expérience utilisateur d'un site en: attirer l'attention sur des éléments importants que les utilisateurs doivent remarquer rapidement.

CSS3 a introduit une nouvelle syntaxe d'animation qui peut vous aider à réaliser beaucoup de choses intéressantes dans vos conceptions. Construire des animations sympas peut parfois être compliqué et prendre beaucoup de temps. C'est à ce moment-là que des bibliothèques et des générateurs d'animations peuvent être utilisés.

Découvrez quelques-unes des animations rendues possibles avec CSS:

38 démonstrations inspirantes d'animation CSS3
15 beaux effets de texte créés avec CSS
30 animations CSS sympas à voir
Comment créer l'effet de rebond avec une animation CSS3

Dans cet article, nous allons examiner 10 outils géniaux qui vous permettront de créer plus facilement et plus rapidement vos propres animations..

1. CSS3Gen Générateur d'animation CSS3

CSS3Gen vous fournit un générateur d'animation facile à utiliser qui vous permet de générer rapidement des animations de base. Bien que vous ne fassiez pas de travaux compliqués avec cet outil, c'est un excellent choix si vous voulez créer une animation standard sans trop de tracas..

Vous ne devez pas vous salir les mains avec du code, comme vous pouvez définir les propriétés d'un formulaire, prévisualiser le résultat, puis simplement copier et coller le code dans votre propre fichier CSS.

2. CSS Animate

Si vous besoin d'animations plus compliquées, vous pouvez trouver CSS Animate utile. Il a une interface utilisateur plus mature, vous pouvez définir légèrement plus de propriétés et vous pouvez suivre, arrêter et redémarrer l'animation à l'aide d'un scénario intuitif..

Il y a aussi des exemples d'exemple, tels que “Rebondir”, “Secouer”, et “Balançoire”, que vous pouvez charger dans le générateur et modifier le code en fonction de vos besoins.

3. Coveloping CSS Générateur d'animation

CovelopingLe générateur d'animation de est probablement le meilleur choix si vous êtes nouveau avec les animations CSS3, et veulent comprendre rapidement comment ils fonctionnent. Cet outil simple mais puissant vous permet de tester les différents types d'animation proposés par CSS3 et de voir facilement quelle est la différence entre eux..

Vous devez uniquement définir 4 paramètres: type d'animation, fonction d'animation, durée en secondes et si l'animation est infinie. Lorsque vous êtes prêt, il vous suffit de récupérer le code HTML et CSS généré..

4. Animations magiques

Animations Magiques est une bibliothèque CSS cool qui permet de placer facilement des animations avec des effets spéciaux sur votre site. Par exemple, vous pouvez faire disparaître ou disparaître des éléments, les ouvrir à gauche ou à droite, puis les retourner, les faire pivoter vers le bas, le haut, la gauche ou la droite, et bien d’autres

Tout ce que vous avez à faire est de télécharger le code, d'inclure le fichier CSS dans votre page HTML et d'ajouter la classe appropriée à l'aide de jQuery de la manière suivante:

 $ ('.votrediv'). hover (function () $ (this) .addClass ('magictime puffIn'););

Vous pouvez également modifier les paramètres de la minuterie et rendre l’animation infinie à l’aide de jQuery (pour plus de détails, voir le fichier Lisez-moi)..

5. Animate.css

Animate.css vous fournit un ensemble de animations CSS3 sympas et inter-navigateurs. Les animations sont divisées en groupes tels que les chercheurs d’attention, les entrées rebondissantes, les sorties rebondissantes, les entrées décolorées et bien d’autres, vous ne pouvez donc pas vous plaindre d’un manque de choix.

Vous pouvez télécharger le code depuis Github, il vous suffit ensuite d'ajouter le fichier CSS à votre page HTML et les classes CSS correspondantes aux éléments HTML que vous souhaitez animer..

6. Bounce.js

Bounce.js est une bibliothèque JavaScript pratique qui vous permet de créer des animations compliquées. Bounce.js possède une interface utilisateur évoluée qui vous permet d’ajouter différents composants (accélération, durée, délai et nombre de rebonds, par exemple) manuellement à votre animation, ou de sélectionner un paramètre prédéfini prêt à l’emploi, puis de le lire. et affiner les propriétés si nécessaire.

7. AniJS

AniJS est une bibliothèque JavaScript supercool qui vous permet d’ajouter des animations CSS3 à vos conceptions et de construire des composants d'interface sophistiqués tels que des onglets animés, des accordéons, des modaux, des menus déroulants, des notifications d'applications mobiles, des informations de défilement et bien d'autres.

Il fonctionne avec tous les navigateurs modernes, y compris iOS et Android, ne nécessite aucune bibliothèque tierce et dispose d'une vitrine spectaculaire appelée AniCollection où vous pouvez facilement expérimenter les différents effets fournis par la bibliothèque..

8. Spinners CSS à élément unique

Avez-vous déjà voulu améliorer vos créations avec fileuses de chargement animées? Si la réponse est oui, cette jolie bibliothèque de spinner CSS peut être un excellent choix pour vous. Le code CSS pour les fileuses est écrit en LESS. Il n'y a pas de paramètres, le code est prêt, il vous suffit de l'insérer dans vos propres fichiers HTML et CSS.

9. compteur kilométrique

Odomètre est un outil brillant pour placez des compteurs animés sur votre site. C’est une bibliothèque CSS et JavaScript, la partie CSS est écrite en Sass, et vous pouvez choisir parmi différents thèmes tels que “Numérique”, “Gare”, et “Voiture”.

Pour utiliser Odometer, vous devez ajouter le fichier JavaScript et le fichier de thème choisi à votre page HTML, puis le class = "odomètre" sélecteur à l'élément que vous voulez transformer en un compteur animé. Choix idéal pour représenter visuellement des données, ou pour “Arrive bientôt” page plus accrocheur.

10. Snabbt.js

Snabbt.js est une bibliothèque d'animation minimaliste qui vous aide à déplacer facilement les choses. Si vous avez besoin d'un peu d'inspiration, jetez un coup d'œil aux démos pour voir ce que vous pouvez réaliser avec cet outil d'animation intelligent. Le tableau périodique animé de la capture d'écran ci-dessous n'est qu'une des nombreuses possibilités offertes par Snabbt.js..

Vous devez écrire un peu de JavaScript si vous voulez utiliser cette bibliothèque, mais comme le résultat est assez spectaculaire, cela en vaut probablement la peine..