備忘録：css-animationのmixin化

※ SCSSあまり詳しくないので、もっとスマートな方法あればコメントください。

目的

scssで細かい条件を都度指定できるアニメーションmixinを作成したい。

例：
要素がぷるぷる震え続けるアニメーションpuru-puruを定義する場合、
@include animation.puru-puru(3deg, 200ms); のように
揺れ幅（3deg）と速度（200ms）を調整できるようにmixin化する。

コード

animation.scss

@keyframes puru-puru {
  from {
    rotate: calc(var(--puru-deg));
  }

  50% {
    rotate: calc(var(--puru-deg) * -1);
  }

  to {
    rotate: calc(var(--puru-deg));
  }
}

@mixin puru-puru($deg, $speed) {
  --puru-deg: #{$deg};
  animation: puru-puru $speed infinite linear;
}

実際に使う時

@use '.../animation.scss';

.xxx {
    @include animation.puru-puru(3deg, 200ms);
}

解説

• @keyframesはCSSの記法なので、定義する時点で未定義のSCSS変数を参照するように指定するとエラーがでるかと思いCSS変数を利用しました。（実際未確認）
• @keyframes内ではCSS変数を参照するように指定して、
  SCSSのmixinにてanimationを指定する直前でCSS変数を定義すれば、
  @keyframesでその値が参照されるため、通常のmixinのような挙動を叶えられると考えました。
• 実際に書いてみたところ、iOSのSafariとmacのChromeでは問題なく動作しました。