Animation Chain makes it dead simple to chain CSS-animations. It is currently available for Sass. Pass a map of selectors and animations to the ac mixin, and it automatically sequences the animations.
npm install sass-animation-chain
bower install sass-animation-chain
Import ac.scss (located in the src folder) into you project, and your done!
There's a bunch of example files in the folder called examples. They have pre-compiled css and all, but if you want to play around with them you can do
npm install and then run `gulp to compile changes to the SCSS-files.
Animation Chain is basically a mixin called ac. Pass a map with targets, and optional defaults, to sequence the animations.
Each item in targets accepts any standard animation-related parameter, as well as a special selectors key. At a minimum, it has to recieve selectors, animation-name and animation-duration.
Each item in the list calculates the previous items' durations and delays, and adds this to it's own delay.
Example without defaults.
Unlike regular css, you can use negative delays to overlap animations. In the example below, .element-2 will start animating 500ms before .element-1 is done
You can also feed defaults to the mixin. These will be applied to each target element, and can be overridden if you want.
Things To Take Into Consideration
- It is currently not possible to use the same selector on multipe items in the chain (the second would overwrite the first).
- There's no vendor-prefixing, but you should probably use autoprefixer anyway.
Created by Jakob Berglund www.jakobberglund.com