// Source https://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/ @mixin animation($animate...) { $max: length($animate); $animations: ''; @for $i from 1 through $max { $animations: #{$animations + nth($animate, $i)}; @if $i < $max { $animations: #{$animations + ', '}; } } -webkit-animation: $animations; -moz-animation: $animations; animation: $animations; } @mixin keyframes($animationName) { @-webkit-keyframes #{$animationName} { @content; } @-moz-keyframes #{$animationName} { @content; } @keyframes #{$animationName} { @content; } }