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

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

来源: link 标签:htmlcsssasscss-animationsscss-mixins 更新时间:

  问题

我使用名为keyframe动画,我想保存自己一些写作.我看到了关于scss keyframe函数的这个 SO问题但我觉得它没有帮助(或者我愚蠢地理解)

我尝试了几种变体 

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

  最佳答案

我在这里找到了 here 一个有趣的情况,首先用键帧mixin创建一个动画,然后您使用另一个mixin包含该动画(见4.动画和键帧).

但是,如果您不想包含2个mixins,因为您想保存一些写作,另一个想法可能是使用简单的映射循环创建您需要的所有关键帧动画: 

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

  相同标签的其他问题

htmlcsssasscss-animationsscss-mixins
上一个问题:
下一个问题: