Generate @keyframes from a Sass map

With a simple Sass map, you can create @keyframes with easily editable stops. Since the keyframe generator is a mixin, you can use it for multiple maps and animations across your site.

The Map

// Add or Remove stops easily

$animation-name: colors;

$stops: (
25%: #3BD27A,
50%: #E98A37,
75%: #9B59B6,
100%: #CCCCCC
);

The Mixin

// Where action happens
@mixin keyframe-generator($map, $name){
@keyframes $name {
@each $key, $value in $map {
#{$key} { background: $value; }
}}}

@include keyframe-generator($stops, $animation-name);

The CSS

This mixin above will compile out to:

@keyframes colors {

25% { background: #3bd27a; }
50% { background: #e98a37; }
75% { background: #9b59b6; }
100% { background: #cccccc; }

}

Example

See the Pen Generate @keyframes from Sass map and @mixin by Chris Holder (@see8ch) on CodePen.0

Leave a Reply