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

Question

我使用命名的关键帧动画，我想节省一些写作。我已经看到这个关于 scss 关键帧功能的 SO Question但我觉得它没有帮助（或者我愚蠢地理解）

我尝试了几种变体

$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。

标签： htmlcsssasscss-animationsscss-mixins

Answer 1

我在这里发现了一个有趣的情况，首先您使用关键帧 mixin 创建动画，然后使用另一个 mixin 来包含该动画（请参阅4. 动画和关键帧）。

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

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