Although the PostCSS ecosystem doesn't yet have a plentiful selection of animation-based plugins, this should not stop us from using it to compile our animation styles. To prove this, we're going to modify the jQuery and .add/remove class version of our previous demo—we'll use PostCSS to add an animation easing from the Animate.css
library created by Dan Eden.
The plugin we require is the postcss-animation
plugin, which is available from https://github.com/zhouwenbin/postcss-animation and uses the postcss-animation-data
plugin from https://github.com/zhouwenbin/postcss-animation-data. It's a cinch to install the plugin, which uses the same method as all of the other plugins we've installed to date.
Let's get started on the demo:
We'll start by installing the
postcss-animation
plugin—for this, go ahead and open a Node.js session, then change the working directory to our project area.At the prompt, enter this command and press Enter:
npm install postcss-animation ...