$prefixes: ('', '-moz-', '-webkit-', '-ms-') !default; @mixin circle-animation(){ @for $i from 0 to length($prefixes) { @include circle-animation-details(nth($prefixes, $i + 1)); } } @mixin circle-animation-details($name){ #{$name}animation-name: spin; #{$name}animation-duration: 1250ms; #{$name}animation-iteration-count: infinite; #{$name}animation-timing-function: linear; } @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } }