Créer facilement des animations en CSS3, Bounce.js

Le langage CSS (Cascading Style Sheets) a été conçu pour appliquer des styles et des mises en forme sur des éléments HTML. C’est un langage informatique assez simple quand on se contente de l’utiliser dans sa forme rudimentaire (décorations, couleurs de texte, bordures, positionnement des éléments, etc.), mais qui se révèle beaucoup plus complexe quand on souhaite se lancer dans la création d’animations que la version 3 autorise qui sont basées sur des transitions animées entre un style CSS à un autre.
La démarche est grandement simplifiée en passant par l’outil en ligne Bounce.js qui permet de créer des animations en CSS3 en quelques clics de souris. La création d’une animation se passe en sélectionnant un effet dans le menu de gauche Select Preset qui propose un grand nombre d’effets visuels prédéfinis : rotations, agrandissements, déplacements latéraux, bondissements, dépliements… L’enchainement de plusieurs de ces effets génère une animation du plus bel effet.
Au-delà des effets prédéfinis, il est aussi possible en cliquant sur le bouton Add Component de créer ses propres effets à partir des composants de type Scale (pour un agrandissement de taille), Translate (déplacements horizontaux et/ou verticaux), Rotate (rotation) et Skew (inclinaison pour mettre un élément de travers). Pour chaque composant, de nombreux paramètres peuvent être ajustés pour jouer sur la vitesse, les déplacements voulus, la durée, les angles… Là aussi comme pour le cas des effets prédéfinis, on peut varier à l’infini l’enchainement des animations.

animation-css-bounce-js

Dans la fenêtre de visualisation, les animations en cours de création sont immédiatement affichées avec la possibilité de les jouer en boucle, de les ralentir ou de les mettre en pause.
Une fois que le résultat obtenu est satisfaisant, on récupère le code CSS complet de l’animation générée en cliquant sur le lien Export CSS qui va ouvrir une fenêtre où il est récupérable par copier-coller. Des explications renvoient vers une page du site développeur de Mozilla pour savoir comment intégrer ce code CSS dans ses propres projets. En cliquant sur le lien Get Short URL, on récupère une adresse raccourcie renvoyant vers une page Web dans laquelle l’animation va être présentée.
Les sources du projet Bounce.js sont disponibles sur GitHub.

Source : Bounce.js

Les commentaires sont fermés.