Updating code to use PostCSS

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 --save-dev
```
If all is well, we should see the plugin install:
From the code download that accompanies this book, extract and save a copy of the contents of the T39 folder to our project area—we'll use this as a basis for converting to PostCSS.
Open style.css from the css sub-folder of the tutorial folder, then at the bottom, modify the .move rule as indicated:
```
.move {
  animation-name: bounce;
  transform: translate(17.5rem, 0rem);
  transition-duration: 3.5s;
}
```
Save this file into the src folder, then fire up a Node.js command prompt and change the working folder to our project area.
At the prompt, enter gulp then press Enter—if all is well, we should see these files appear in the dest folder:
The last step is to copy the contents of this folder into the css folder within the T39 folder.

At this point we're good to test our demo—if we try previewing the results of our work, we should see no change in appearance of our demo, but can be safe in the knowledge that we're now compiling our code using PostCSS.

Testing our altered code

Although we may not see any change in the appearance of our demo, there will clearly be a difference in how it behaves. To view this, we need to take a look under the covers of our demo, at the code.

For this demo, we added an animation-name property, and assigned it the name bounce; when compiled, PostCSS adds in the appropriate @keyframes rules to the code:

So, if we were to take a look at the performance, how does it compare? Even with the extra animation property assigned, it still pulls a respectable frame rate of 48.29FPS, when compared to using standard .animate():

This helps reinforce that where possible, we can improve performance by removing any dependency on using .animate() in our code. The use of CSS styling to animate content isn't quite ready to replace JavaScript, but it is slowly getting there!

Okay, onwards we go: we've briefly looked at the various ways to animate content; it's time to make that final transition to using PostCSS. How many times have you seen forms that display the label above, or to the left of, each field? Sure, it gets boring after a while, seeing the same old design! It's easy to change, so there is no excuse for not doing so. To prove this, we're going to use PostCSS to slide each label up when that field has focus. Yes, you heard me right…slide up. Let's take a look at how we can provide a new take on that venerable piece of functionality for any site.

Previous Chapter

Exploring plugin options within PostCSS

Next Chapter

Creating a demo in PostCSS

Table of Contents for Mastering PostCSS for Web Design

Updating code to use PostCSS

Testing our altered code

Table of Contents for
Mastering PostCSS for Web Design