over 8 years ago from Andreas Eberharter, Founder @Claan
I was wondering if there are any CSS animation tools which work for example like Flash and export CSS? A google search "CSS Animation Generator" gives a few results but nothing really helpful. What do you use or used and what is your experience?
FuckingKnowledge.app with 'a trial and error' plugin.
oh, never heard of that app! Thanks for the suggestion ;)
"Awww, come on guys, it's so simple maybe you need a refresher course. [leans arm on hot engine part, then jumps away] Heyya! It's all ball bearings nowadays. Now you prepare that Fetzer valve with some 3-in-1 oil and some gauze pads, and I'm gonna need 'bout ten quarts of anti-freeze, preferably Prestone. No, no make that Quaker State." - Fletch
I really like Dan Eden's animate.css, if that helps you out. Simple animations, really easy to use. If you need them on scroll, wow.js is also helpful?
Nice, thanks!
I use that one too.
If you're a Sass user, a diced up version of animate.css found here is super useful. Just comment out what you don't need :)
For easing curves (css/scss/js) — http://easings.net/
Nice one, thanks!
It doesn't export as CSS (yet..?), but Keynote is absolutely awesome for prototyping animations:
http://paulmcaleer.com/blog/2013/6/10/keynote-is-a-kick-ass-prototyping-tool
Cheap, easy, powerful.
I've been happy with Tumult's Hype - supposed to be a new version soon. https://www.youtube.com/watch?v=MfPwa-oIUmI
Thank you Kel, never heard of Tumult's Hupe, it looks very complete, wonder how the resulting code would look like? Do you have an example you could post?
They have a demo, the code is pushed through JS mostly, but you can still alter the end result. Still better than flash considering mobile :) here's something old from Hype 1 - http://www.badcat.com/hype-dow/ and something we're starting on now - http://www.jugglers.com/school-appearances/ there's tons more here - http://tumult.com/hype/gallery/
Also did a post on animation tools a while back - still some good links to check out. http://www.badcat.com/journal/html5-css3-mac-animation-tools/ ymmv
I've found Ceaser to be quite useful for getting smoother & more custom easing curves.
Thank you Oleg. I have played around with Ceaser before, it just does not let you chain different animations and create something like a timeline. I had a bookmark somewhere with a tool which let you do this, but I can not find it anymore :S
Do you mean bounce.js?
Yeah, that's the one! Thank you!
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now