css3关键帧动画的SASS(而非SCSS)语法

以下是如何在Sass语法中实现css关键帧:

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

下面是一个Sass混合插件,用于添加供应商前缀:

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

以下是如何在Sass语法中使用mixin:

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

只需创建关键帧:

@keyframes name
  0%
    transform: scale(1)
  50%
    transform: scale(1.5)
  100%
    transform: scale(1)

然后使用

.example-btn
  animation: name 2s linear infinite

如果您将关键帧存储在其他.sass文件中,则只需要导入此文件(带有关键帧),一切都会正常工作。