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

【问题标题】：how to use scss function or mxin to generate key frame animation如何使用scss函数或mxin生成关键帧动画
【发布时间】：2020-01-27 05:35:21
【问题描述】：

我使用命名的关键帧动画，我想节省一些写作时间。我看过这个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。

【问题讨论】：

标签： html css sass css-animations scss-mixins

【解决方案1】：

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

但是，如果您不想包含 2 个 mixin，因为您想节省一些写作时间，另一个想法可能是使用简单的地图循环创建您需要的所有关键帧动画： p>

$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;
}

【讨论】：