Refactoring Sass Keyframe Stops

31 views Asked by At

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?

0

There are 0 answers