All you need to know about CSS Transitions | Hacker News Reader

All you need to know about CSS Transitions

blog.alexmaccaw.com

116 pointsuptown11 comments

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.

"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.

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.

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

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.

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

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.

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.

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?

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.

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.

Reply on news.ycombinator.com