Up to this point, all of our animations have had one thing in common—they are individually created, and stored within the same stylesheet as other styles for each project.
This will work perfectly well, but we can do better—after all, it's possible that we may well create animations that others have already built! Over time, we may also build up a series of animations that can form the basis of a library that can be reused for future projects.
A number of developers have already done this. One example of note is the Animate.css library, created by Dan Eden. It's worth getting to know this library, as we will use it later in this book in the guise of the postcss-animation plugin for PostCSS. In the meantime, let's run through a quick demo of how it works, as a precursor to working with it in PostCSS.
Note
The images used in this demo are referenced directly from the LoremPixem site, as placeholder images.
Let's make a start:
We'll start by extracting a copy of...