So I have reviewed the SLDS guide on motion and it is great and all but I could not find anywhere in the documentation the actual CSS to implement the examples they give
They show all these Named Animations yet I can find no documentation on how to use them.
It is just there as an example of what you should do without any information on how to do it or is there actual CSS that can be used to achieve the results.
Eric, I suspect your issue is perhaps that you don't have an animation background. What they show on the page you reference are intended more to help demonstrate what happens when the various Lightning Design System "Effects" are applied an object of the same size. They're visual references to illustrate how the effects work when applied to Lightning Design Components.
I have a 3D modeling and animation background. At the top of the page, they mention "3 Principles" which are "Timing", "Elevation" and "Effects". When someone creates an animation or movie, they begin by "story-boarding" it. Later, they move on to "keyframing", which is deciding where they want their objects to be and in what "state" at a specific time in the animation.
Animations are sometimes broken down into "sub-animations", particularly when part of it is repetitive, such as when something vibrates, the legs of a body move as a person walks, their arms swing in rhythm, etc. The same could be said of "squish and squash" effects as a ball bounces.
When the documentation speaks of elevation, they're referring to front and back or "screen depth" where one object will appear as though it's in front or behind another. That allows objects to cast shadows on each other or to appear initially close, then move further away as it shrinks in size on the screen, perhaps even becoming partially obscured by other objects in the animation.
Depending on the type of animation one desires to create, they will "ease in" or "ease out" of transitions. Either that or they will use some other form of "non-linear" transition to make things appear more natural or to illustrate "anticipation". The use of exaggeration is often necessary with animations to convey the desired effect. Watch old Mickey Mouse or Bugs Bunny cartoons and you'll readily see what I mean.
The effects illustrated on the page you've referenced are meant to be used in combination with one another to achieve an overall desired animation that's only limited by one's imagination and the commands available to you along with the frame rates a user will be able to view (ideally 30 frames/sec).
There are many books available on the subject of animation and loads of software for creating them. I recommend you purchase a book on the basics that will help you better understand how to apply those principles using the commands available with the Lightning Design System. I don't think the documentation is intended to teach how to "animate" so much as provide you with examples of what each command does so you can decide how you might choose to utilize it to enhance your pages.
