Creating CSS animations and transitions with Motion UI

Motion UI is a handy Sass library from Zurb Foundation for creating CSS transitions and animations quickly. You can download the Starter Kit from the Motion UI site and fiddle around with it, but that lacks the control of your own because it comes with many built-in defaults and effects that you have to stick with. So, if you want to have more control and take full advantage of Motion UI, you must know how to customize and compile the Sass code yourself. Let's find out how you can write your Sass animations in the following steps:

1. Install Motion UI and its dependencies (Sass and Sass loader) via npm on your terminal:

$ npm i motion-ui --save-dev
$ npm i node-sass --save-dev
$ npm i sass-loader --save-dev

2. Create a main.scss file in a /css/ folder in the /assets/ directory and import Motion UI as follows:

// assets/scss/main.scss
@import 'motion-ui/src/motion-ui';
@include motion-ui-transitions...