Créez vos animations CSS3 dans une interface graphique dédiée avec CSS Animate

Je ne sais pas vous, mais moi j'ai toujours eu de mal avec la mise en place des animations CSS3. La syntaxe n'arrive pas à me rester dans la tete, et les taches les plus simples finissent toujours par me faire perdre quelques dizaines de minutes, ce qui est très frustrant. Heureusement, des solutions existent, comme par exemple le petit service que je vais vous proposer aujourd'hui : CSS animate.

Créez dynamiquement vos animations CSS3 avec CSS animate

L'interface de CSS Animate se compose de quatre zones distinctes : une timeline, un WYSIWYG, des panneaux de propriétés et enfin un aperçu du code.

La timeline est la zone la plus importante pour démarrer. Elle permet des créée ou sélectionner une des keyframes de votre application. Il est aussi possible d'avancer/reculer dans l'animation, lancer la lecture ou se déplacer plus précisément dans la timeline de l'application.

Le WYSIWYG est une zone ou il est possible de voir et d'éditer directement la position et les différentes transformations (tailles, deformations, rotations) appliquées à votre element sur la keyframe sélectionnée.

Le panneau d'options permet un réglage beaucoup plus fin de toutes les options appliquées à votre element, et ce pour chacun keyframe. D'autres options, comme l'opacite, se retrouvent ici sans être disponibles sur le WYSIWYG.

Comme vous pouvez le voir, il est aussi possible de modifier les options de l'animation elle-même, comme le point de rotation de l'objet, le type de fonction de easing appliqué, ou le temps total de l'animation.

Enfin, l'affichage du code permet simplement de choisir les navigateurs à supporter et de récupérer le code à coller dans votre feuille CSS.

Mon avis

Sans surprise, je trouve cet outil génial. Même sans une grande compréhension des animations CSS3, il est possible avec de créer des animations complexes en un minimum de temps. Le code généré est propre, complet, indente, bref rien à redire.