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

HTML
26.11.2018

Использование @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)

Рекомендую к прочтению:

Оставить комментарий