如何使用scss函数或mxin生成关键帧动画

Question

我使用命名关键帧动画，我想节省一些写作时间。我看过这个 SO Question regarding scss keyframe function 但我觉得它没有帮助（或者我太笨了）

我试过几个变体

$green: limegreen;

@mixin pulse-animation($name, $color) {
  @keyframes #{$name} {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba($color, 0.4);
    box-shadow: 0 0 0 0 rgba($color, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 12px rgba($color, 0);
      box-shadow: 0 0 0 12px rgba($color, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba($color, 0);
      box-shadow: 0 0 0 0 rgba($color, 0);
    }
  }
}
.my-element {
  animation: @include pulse-animation("green", $green) 2s infinite;
}

我也希望不必将名称传递到此 mixin。

Answer 1

我发现 here 一个有趣的情况，首先您使用关键帧混合创建动画，然后使用另一个混合来包含该动画（请参阅 4。动画和关键帧).

但是，如果您因为 不想写 2 个混入而不想写一些东西，另一个想法可能是使用一个简单的方法创建您需要的所有关键帧动画地图循环：

$colors:(
 "green": limegreen,
 "black": black,
 "white": white /*here you can add all colors you need*/
);

@each $name, $color in $colors {
  @keyframes #{$name} {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba($color, 0.4);
    box-shadow: 0 0 0 0 rgba($color, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 12px rgba($color, 0);
      box-shadow: 0 0 0 12px rgba($color, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba($color, 0);
      box-shadow: 0 0 0 0 rgba($color, 0);
    }
  }
}

.my-element {
  animation: green 2s infinite;
}

如何使用scss函数或mxin生成关键帧动画

how to use scss function or mxin to generate key frame animation

html

css

sass

css-animations

scss-mixins