

CSS3 Animation Cheat Sheet - aram
http://www.justinaguilar.com/animations/

======
halisaurus
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.

~~~
kaonashi
The js was just to add and remove the class; it was inline for documentation
purposes.

------
yapjonathan
H5BP put together a very comprehensive list.
[http://h5bp.github.io/Effeckt.css/dist/](http://h5bp.github.io/Effeckt.css/dist/)

~~~
vittore
In fact I even thought it was unnamed fork of effeckt.

------
stephenitis
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](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.

------
davidhariri
dan eden made this exact thing ages ago:
[http://daneden.me/animate/](http://daneden.me/animate/)

~~~
cliveowen
This one is meant to teach you how to do it yourself.

------
harrisonpowers
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;

~~~
harrisonpowers
Created a small script to take care of this. Hopefully someone else finds it
useful.

[https://github.com/fijimunkii/CSS3.fadeIn.fadeOut.js](https://github.com/fijimunkii/CSS3.fadeIn.fadeOut.js)

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

~~~
bgnm2000
my thoughts exactly

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

~~~
untog
Apple? Apple has by far the best performance that I've seen when compared to
Android and the like.

~~~
CountHackulus
In iOS5, css transforms worked great, a bug was introduced in iOS6 crippling
the performance, it still hasn't been fixed in iOS7. I'm not comparing to
Android, I'm just saying that a huge mobile market is basically unavailable
with this feature.

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

------
cliveowen
Very useful, kudos!

------
czbond
Absolutely useful, thanks.

