How do I understand Transform properties in snap.svg?

The transform format is a string that is a sequence of transforms, so you can have several after each other.

Edit: Snap doesn't make a distinction between upper/lower case these days, so this part does not make a difference (it maybe worth being aware of it though, in case you see some Raphael.js code and want to understand), the rest should still be relevant though...

T/t = Translate (t is relative, T is absolute) R/r = rotate(r is relative, R is absolute) S/s = scale(s is relative, S is absolute)

Its worth looking at the Raphael transform documentation if the Snap.svg doesn't have enough information, as there is a lot of overlap.

For transformations, some will reference a 'centre of origin' about which to rotate/scale etc, as sometimes you may want the centre of origin to be the object itself, sometimes 0,0, sometimes around a specific point.

t-10 0 s0 32 32 would translate x,y -10,0 and then scale x,y,cx,cy so scale 0 on the x, 32 on the way around cx 32.

r180 32 32 would rotate 180 degrees around point 32,32. You can normally use a comma or space to separate values.

after represents "attribute" values to set after the animation finishes. animafter represents "animation" values to set after the animation finishes.

Snap seems to use the same syntax as raphael. t is translate so thats translate -10 units in x. s is scale and r is rotate.