I have a set of keyframe animations that targets HTML that looks like the following:
<g class="container">
<path class="one" />
<path class="two" />
<path class="three" />
</g>
with sass that looks like
.container {
animation: anim-container 1s infinite linear;
}
.one {
animation: anim-one 1s infinite linear;
}
.two {
animation: anim-two 1s infinite linear;
}
.three {
animation: anim-three 1s infinite linear;
}
@keyframe anim-container {
0% {
transform: ...;
}
2% {
transform: ...;
}
5% {
transform: ...;
}
...
}
@keyframe anim-one {
0% {
opacity: ...;
}
2% {
opacity: ...;
}
5% {
opacity: ...;
}
...
}
@keyframe anim-two {
0% {
opacity: ...;
}
2% {
opacity: ...;
}
5% {
opacity: ...;
}
...
}
@keyframe anim-three {
0% {
opacity: ...;
}
2% {
opacity: ...;
}
5% {
opacity: ...;
}
...
}
Is there an elegant way to abstract the keyframe stops into a mixin or function since they're the same across all keyframes?