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