

All you need to know about CSS Transitions - uptown
http://blog.alexmaccaw.com/css-transitions

======
jlongster
Funny enough, I just released my library to work with CSS animations from
javascript: <https://github.com/jlongster/css-animations.js>

I think CSS3 animations are superior to transition, since they essentially
take 2 arguments (from and to) instead of just 1 (to). This makes it much
easier to deal with lots of use cases because you frequently have to worry
about the existing state of an element with transitions.

------
PStamatiou
"The short-term fix, albeit controversial, is to disable subpixel anti-
aliasing completely."

The other option is something like opacity 0.99 on that element, or don't have
your transition (if it's an opacity transition) go all the way to 1. But at
the end of the day, I believe it itself just prevents subpixel antialiasing as
well.

~~~
_frog
My solution in this case has been to disable subpixel antialiasing on only the
elements that are being animated. It's a messy fix but it works without
sacrificing smooth text everywhere else on the site.

------
nchuhoai
For anyone wishing to CSS transition height from 0 to auto (or other way
round), you can do it with max-height and achieve the same outcome, i.e. max-
height: 0px to max-height: 9999px

~~~
brian_c
This is useful in a pinch, but transitioning a 100px high element from max-
height 9999px to 0 means there's going to be a huge delay while it's
transitioning between 9999px and 100px followed by a very fast transition
between 100px and 0, which is usually worse than having no transition at all.

~~~
nchuhoai
i mean if you know the approximate/upper limit of the height, you can minimize
that delay.

------
bcoates
It looks like these aren't quite ready for primetime; the JSFiddle on my
Chrome results in a very jerky animation that looks much worse than just
snapping to the new position would.

------
koenbok
I just released a prototyping framework that uses css transforms:
<http://www.framerjs.com/>

It's targeted at designers, so simple and fast and works great on desktop and
mobile.

------
robmcm
It's a shame you can't query the CSS from the JS, so you are not left in a
position of having delays specified in two places (see queueing transitions).

I guess that also questions if this sort of thing is behaviour or style?

------
mddw
I'm very surprised Paul Irish veted this article.

It's far from "all" you need to know about transitions (delay, quirks of 3D
transform regarding backface visibility...)

Moreover it's quite weak on cross-browser compatibility and performance.

~~~
josteink
_Moreover it's quite weak on cross-browser compatibility_

I too took a note of this. Most (all?) examples comes with -webkit- vendor-
prefixes and nothing else.

