Использование @keyframes с препроцессором SASS

Использование @keyframes с препроцессором SASS.

Базовый пример использования @keyframes в SASS:

@keyframes name-of-animation
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)

Создаем миксин, чтобы добавить вендорный префикс:

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content

Используем миксин в SASS:

+keyframes(name-of-animation)
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)