Editeur/IDE animation pure CSS ?

Holà !

Les CSS3, les transformations, les keyframes c'est super... les mettre en oeuvres c'est l'enfer, non ?

Lorsqu'il s'agit d'animer un ou deux éléments tout va bien... Mais dès qu'une dizaine d'éléments avec plusieurs type de de transformations et des enchainements synchrones se retrouve à l'écran... cela devient rapidement un beau défi. Bref un beau niveau d'abstraction !

Je trouve cela un poil frustrant car il existe des outils qui permettent de mettre en place visuellement de animation et d'avoir un aperçu quasi temps réel.

Par exemple After effect permet de travailler sur le attributs de translations, de scale, les rotations ainsi que les accélérations de beziers.

Pourtant, à moins d'avoir mal cherché, je n'ai pas trouvé de moyen de convertir ou d'exporter une animation After Effect -ou autre- en pure CSS.

Et vous, c'est quoi votre "workflow" animation CSS ?

Bien à vous.

Google webdesigner et Adobe je sais plus quoi.

Sinon, le mieux étant vélocity ou greensock

Merci niuxe !

Je fais un petit tour de solutions :

Adobe animate génère un canvas uniquement (donc pas de CSS manipulable après exportation).

Velocity.js et Greensock semble top mais ne répond pas vraiment au besoin : avoir un éditeur visuel d'animation générant du pure CSS.

Au final Google webdesigner semble pas mal en le détournant de son objectif affiché de simple création de bannière. J'apprécie de pouvoir utiliser tour à tour l'éditeur et le code en même temps. Et surtout de ne pas avoir à gérer une #&é"#!? de timeline basé sur des pourcentages

dasys a écrit :
Et surtout de ne pas avoir à gérer une #&é"#!? de timeline basé sur des pourcentages

Hô que oui surtout quand il faut les décliner pour être rétro-compatible !

niuxe a écrit :
Google webdesigner...

Wouha ! je ne connaissais pas...

Greg_Lumiere a écrit :
Hô que oui surtout quand il faut les décliner pour être rétro-compatible !

Ce problème ne devrait plus en être un depuis longtemps avec Autoprefixer.

Hello,

je réponds à ce topic un peu tard, mais ça m'intéresse aussi une IDE qui permette de faire des bannières en pur CSS.

Pour l'instant, je les fais avec Adobe Animate quand le client l'accepte. En tant qu'ancien flasheur, l'interface est très simple pour moi, du coup les bannières sont rapides à faire. Le pb c'est que ça ajoute 180ko avec la librairie createjs (quand le client ne permet pas de charger à distance les lib). Aussi, l'animation est moins "fluide" qu'en css je trouve, mais ça passe.

GWD est horrible à utiliser, c'est vraiment pourri. Et le code qu'il sort est tout simplement affreux. Mais il y a pas mal d'options interessantes (optimise les png, crée un zip etc).

Edge est pas mal, mais encore une fois c'est du JS et ça pèse vite très lourd.

Un truc que j'utilise aussi, c'est adobe Wallaby. C'est un petit programme en AIR créé par Adobe mais abandonné il y a plusieurs années maintenant. C'est super dommage parce que ça marche très bien : tu fais ton anime en flash normal (as3, pas canvas), et ensuite tu mets ton fichier fla dans Wallaby et il te sort l'animation en CSS, nickel.
Enfin nickel ou presque. Il faut bidouiller un peu, mais le résultat est très bien, pour un poids imbattable.

Vu les contraintes des clients (bannières à 50k) par exemple, un vrai logiciel d'anim pur CSS serait vraiment bien venu ! Le mieux est certainement de tout faire à la main, mais visuellement et techniquement c'est super long.