Créez vos animations CSS3 avec l’interface de bounce.js

Vous avez toujours eu envie de faire des animations CSS mais, avouons le, la complexité du code nécessaire vous rebute ? Je vous propose de découvrir Bounce.js, une interface graphique el ligue qui vous permettra de créer vos animations sans toucher à la moindre keyframe !

Une interface pour définir vos animations

Bounce est une création de @JoelBesada qui je pense vas faire des heureux parmi vous. Comme son nom ne l'indique pas, cette petite application web vous propose de créer des animations web.

Pour cela, rien de plus simple: choisissez dans le menu à gauche un modèle prédéfini à modifier, ou bien créez votre animation from scratch en ajoutant votre premier "component". La suite passe par l'édition des components en question. A vous de choisir le type d'effet qui vous intéresse (translation, rotation, mise à l'échelle ou mise en perspective), les valeurs de départ et d'arrivée, et le temps que doit prendre cette étape.

De nouveaux effets sont prévus, comme par exemple l'opacité.

Pour enrichir votre animation, il ne vous reste plus qu'à ajouter de nouveaux components et à les personnaliser.

La dernière étape est simplement de récupérer un lien direct vers votre création pour la partager sur les réseaux sociaux, ou bien récupérer le code CSS correspondant pour l'intégrer à votre projet.

N'hésitez pas à partager vos expériences en commentaires !