jeudi 26 septembre 2019

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

I use named keyframe animations and I want to save myself some writing. I have seen this SO Question regarding scss keyframe function But I feel like its not to helpful (or Im to stupid to understand)

I have tried a couple variations of

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

I would also prefer to not have to pass a name into this mixin.




Aucun commentaire:

Enregistrer un commentaire