CSSアニメーションのループ＆ウェイトを Stylus で簡単に

CSS でインターバルのあるループアニメーションを作るのって大変ですよね？
例えば1秒間でアニメーションして、2秒のインターバルがある場合。

div {
  animation: flash 3s linear infinite;
}

@keyframes flash {
             0% { opacity: 1; }
  16.666666666% { opacity: .5; }
  33.333333333% { opacity: 1; }
}

辛い！辛すぎる！！！
もっと複雑になると尚の事。。。

ってことで AltCSS。
僕がいつも使ってる Stylus で。

// mixins
// name          => keyframes名
// duration      => アニメーション秒数
// interval      => インターバル秒数
// animationHash => アニメーション内容の連想配列
create-keyframes(name, duration, interval, animationHash)
  @keyframes name
    durationRatio = duration / (duration + interval)
    for progress, cssHash in animationHash
      {durationRatio * progress}{unquote('%')}
        for key, val in cssHash
          {key} val

div
  animation flash 3s linear infinite  // アニメーション秒数とインターバル秒数の合計秒数を入れる

create-keyframes(flash, 1, 2, {
    '0': { opacity: 1 },
   '50': { opacity: .5 },
  '100': { opacity: 1 }
})

まあ、多分 SASS とか他の AltCSS でも出来るかと。

animation の合計秒数を自動計算させる為に、
そこも mixin に含めようかと思ったけど、
出力の問題と、汎用性がなくなるのでヤメました。

とりあえず、これで少しは楽しくCSSアニメーションを書けるようになるかと！