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

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 !

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.