Is there a difference in the general Animatable CSS properties listed here?
Certain CSS properties can be animated using CSS Animations or CSS Transitions. Animation means that their values can be made to change gradually over a given amount of time.
Is the waapi a subset of Css Animation?
And are those properties listed in the dom somewhere? Or would I have to copy those to check if a string is such a property?
To answer your question simply, there is no difference in the set of animatable CSS properties. Technically speaking, CSS animation is a subset of Web Animations.
There is no list of animatable properties in the DOM. To determine if a property is animatable you can create an animation, or set the keyframes on an existing animation (using setKeyframes()) and then read back the keyframes using getKeyframes() to see if it appears there.
That's the summary, but here are a few more points that might prove interesting depending on what you're trying to do:
The set of properties that can be animated by CSS transitions is a subset of those that can be animated by CSS animations and Web Animations. These are called transitionable properties.
The set of properties that can be animated by Web Animations is technically a subset of those animatable by CSS animations but in practice they are the same (although see the next point). It is possible, for example, that in future Web Animations might be able to animate the display property but CSS Animations will never be able to do so.
Web animations technically allows prefixed properties to be animated but Safari and Chrome don't support this and Firefox and the spec will likely be changed to match. (For more details see this spec issue.)
Registered custom properties can also be animated by Web Animations although this is not implemented everywhere.
A couple of properties have special names when used in Web Animation keyframes to avoid conflicts, notably cssFloat (for 'float') and cssOffset (for 'offset').
So, to generate a comprehensive list of animatable properties you would probably need
to look at the properties exposed on something like the result of
getComputedStyle(), add in any registered custom properties, possibly drop any prefixed properties, convert offset to cssOffset, and then run them all through setKeyframes()/getKeyframes() to see which ones the browser supports animating.