CSS3 Animation Cheat Sheet

Are we all writing small jQuery scripts right into the HTML in a script tag? This post suggests that practice. I can see it being the faster option for just a 1-3 line script, what's the tipping point when we move it to an independent (minified) .js file? Is that just a readability issue? And why do I need all of jQuery to add/remove a class from one element?

It seems there's a conflict here: Either there's little JS and no need for jQuery, or a lot of JS and no sense in dropping it in the HTML.

H5BP put together a very comprehensive list. http://h5bp.github.io/Effeckt.css/dist/

Its a little surprising that bootstrap 2.0/3.0 haven't implemented a similar feature.

The actual http://www.justinaguilar.com/animations/css/animations.css sheet is more insightful in learning how to do your own animation effects. I just wish the code snippets were side by side the animations as I scroll around and select the examples.

dan eden made this exact thing ages ago: http://daneden.me/animate/

Spent some time yesterday converting jQuery fadeIn/fadeOuts to CSS3 animations and ran into an issue.

Changing the display style (display:none; to display:block;) disables CSS animations and transitions. There are workarounds - setting height to 0 and switching to auto, then animating the opacity - or moving the element off the screen.

Took me a while to figure out why my simple animations weren't working... I had gotten used to display:none; not sure how I feel about height:0;

Somebody should give this guy a CSS3 Color Cheat Sheet. One entry would read "Grey Text on Grey Background: Non Readable".

Great, now all Apple has to do is fix their performance bug with CSS transforms on iOS and I can consider using these.

Cool. Anyone know a mobile safe list of these kind of CSS3 animations?

Very useful, kudos!

Absolutely useful, thanks.