for文を使ったお試しアニメーション

前 2回の記事で Sass の @for 文を使ってるけどこれ便利。もう少し試したくて適当なアニメーションをつくった。

• クソアニメーション（回転） | JSFiddle
• クソアニメーション（拡縮） | JSFiddle

background-color を登録した配列から取り出して設定、あとは繰り返しの回数（$i）を使って回転させる角度を決めたりアニメーション時間を決めたり。わずかに違う表示・アニメーションがいい感じにできあがるようにした。

/* SCSS（クソアニメーション（回転）） */
@for $i from 1 through length($colors) {
  li:nth-child(#{$i}) {
    background-color: nth($colors, $i);
    transform: rotate(calc(10deg * #{$i}));
    animation: papinPopin calc(.2s * #{$i}) ease-in;
    animation-iteration-count: infinite;
  }

  @keyframes papinPopin {
    0% {
      transform: rotate(calc(10deg * #{$i}));
    }
    100% {
      transform: rotate(calc(10deg * #{$i} + #{$i}));
    }
  }
}

Sass から展開された CSS はめっちゃ汚い。

/* CSS（クソアニメーション（回転）） */
li:nth-child(1) {
  background-color: aliceBlue;
  transform: rotate(calc(10deg * 1));
  animation: papinPopin calc(.2s * 1) ease-in;
  animation-iteration-count: infinite;
}

@keyframes papinPopin {
  0% {
    transform: rotate(calc(10deg * 1));
  }
  100% {
    transform: rotate(calc(10deg * 1 + 1));
  }
}

li:nth-child(2) {
  background-color: blue;
  transform: rotate(calc(10deg * 2));
  animation: papinPopin calc(.2s * 2) ease-in;
  animation-iteration-count: infinite;
}

@keyframes papinPopin {
  0% {
    transform: rotate(calc(10deg * 2));
  }
  100% {
    transform: rotate(calc(10deg * 2 + 2));
  }
}

...

アニメーションの名前って難しい。難しすぎて papinPopin というまったく意味のない名前をつけてしまった。