Stylie - Un générateur d'animation Web CSS gratuit

Si vous avez de la difficulté avec la syntaxe CSS3 et que vous voulez un moyen simple de créer des animations, Stylie est un excellent outil pour sauvegarder.

C'est l'un des nombreux générateurs de code libre avec un accent sur les effets animés CSS pur. Stylie est totalement gratuit et open-source, hébergé sur GitHub et alimenté par une bibliothèque d'images clés appelée Rekapi.

La bibliothèque Rekapi utilise JavaScript, c'est donc une alternative au CSS pur. Et heureusement, l'application Web Stylie prend en charge les deux méthodes, de sorte que vous pouvez exporter du code en CSS pur ou en JavaScript .

Par défaut, la première page charge une animation continue avec une animation linéaire. Vous pouvez jouer avec ceci en éditant les paramètres par défaut dans l' onglet Mouvement ou en éditant l' onglet Keyframes .

Dans la liste des images clés, vous pouvez ajouter de nouvelles images clés, modifier leur durée totale et modifier les styles d'animation, y compris les mouvements basés sur l'axe X / Y.

Tout d'abord, cela aura l'air extrêmement déroutant, surtout si vous n'avez jamais fait d'animation d'images clés auparavant. Cependant, plus vous jouez avec cette application, plus cela a du sens.

Par défaut, vous disposez d'une tonne d' options d'accélération différentes à utiliser et elles sont toutes faciles à personnaliser.

Le graphique Motion est beaucoup plus difficile à apprendre, mais il vous donne beaucoup plus de contrôle sur l'accélération de votre animation. Stylie vous permet même de sauvegarder des effets de mouvement personnalisés et de les réutiliser dans l'onglet Images clés pour d'autres animations.

Si je pouvais me plaindre d'une chose, c'est le manque de réactivité de l' application web.

Je ne pouvais pas obtenir l'application entière pour tenir sur mon écran MacBook Pro 13 "même avec le navigateur entièrement maximisé. Cela peut être un problème car la page n'a pas de barre de défilement verticale et beaucoup d'options (comme le code exporté) sont trouvées plus bas dans le volet des paramètres.

Mais mis à part cet ennui mineur, je l'ai fait fonctionner très bien sur mon moniteur plus grand. Et, la qualité d'exportation est comme rien d'autre que vous trouverez sur le web.

Jetez un coup d'oeil à l'application Stylie pour voir comment cela fonctionne et essayez de jouer avec certaines des options. Une fois que vous faites votre animation, vous pouvez exporter le CSS ou le JavaScript et l'utiliser pour tout projet que vous aimez.

Si vous éprouvez des difficultés à apprendre l'interface, vous pouvez également visionner ce bref tutoriel d'une durée d'environ 9 minutes et couvrant toutes les fonctions principales.