@keyframes 中的 SCSS @extend 不起作用

Question

im trying to create two keyframes animations which replace the content attribute of a pseudo element. Unfortunately, it looks like the @extend feature of SCSS is not working within @keyframes . Did i miss something?

Code: ( open animation does not work, close does).

@keyframes open {
  0% {
    @extend .icon-after-arrow-down;
  }
  50% {
    color: transparent;
  }
  100% {
    @extend .icon-after-arrow-up;
  }
}

@keyframes close {
  0% {
    content: '\e905';
  }
  50% {
    color: transparent;
  }
  100% {
    content: '\e902';
  }
}

Answer 1

Solved by comment from @Arkellys "@extend is when you need to chains classes, you should use mixins for this case."