Stylie - Générateur d'animation Web CSS gratuit

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

C'est l'un des nombreux gratuits générateurs de code avec un accent sur les effets animés CSS purs. 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 afin que vous puissiez code d'exportation en CSS pur ou en JavaScript.

Par défaut, la première page charge une démo d'animation continue avec une animation linéaire. Vous pouvez jouer avec cela en éditant le paramètres par défaut dans le Onglet Mouvement ou en éditant le Onglet Images clés.

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

Tout d'abord, cela va regarder extrêmement déroutant, surtout si vous n'avez jamais fait d'animation par image clé auparavant. Cependant, plus vous jouez avec cette application, plus il est logique.

Par défaut, vous aurez une tonne de différentes options d'assouplissement de jouer avec et ils sont tous super facile à personnaliser.

le Graphique de mouvement C'est beaucoup plus difficile à apprendre, mais cela vous donne beaucoup plus de contrôle sur votre animation. Stylie vous permet même enregistrer des effets de mouvement personnalisés et réutiliser ces dans l'onglet Images clés pour d'autres animations.

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

Je ne pouvais pas adapter l'application entière à mon écran MacBook Pro 13 ", même avec le navigateur optimisé. Cela peut poser problème, car la page ne comporte pas de barre de défilement verticale et de nombreuses options (telles que le code exporté) sont disponibles. plus bas dans le volet des paramètres.

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

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

Si vous rencontrez des difficultés pour apprendre l’interface, vous pouvez également visionner ce bref didacticiel qui dure environ 9 minutes et couvre toutes les fonctionnalités principales..