🌈

アニメーション中の色が濁ってしまう原因と対処法

2021/03/29に公開

配色によってはアニメーションの途中で濁った色が出ることがあるかもしれません。

グラデーションで中間色が濁る

青から黄色、赤から緑といった補色関係にある2色（色相環の対角線上に2色）をグラデーションにすると中間の色が濁った色になってしまいます。

background-image: linear-gradient(90deg, blue, yellow);

これはグラデーションの補完の仕様上、色空間の青と黄色の間に無彩色を経由してしまうため中間が濁ったような色になってしまいます。

Original Image made by SharkD, CC BY-SA 3.0, via Wikimedia Commons

右下の青と左上の黄色の間に無彩色があり、2色間の補完はこの対角線をつなぐ処理をするので、中間色が無彩色（＝濁った色）になるグラデーションになってしまいます。

この濁りは2点間の補完ではなく有彩色の中間地点を経由することで回避できます。

background-image: linear-gradient(90deg, blue, #FF0088, yellow);

上記のキューブで言うなら対角線ではなく、外回りをするような色を経由させるのが対処のポイントです。1つ中間点を加えるだけで濁る問題はだいぶ回避できますが、経由点を増やすことでより自然なグラデーションになります。

アニメーションにも同じような補完が発生するので2色間のアニメーションの同様の問題が発生します。

@keyframes gradient {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

こちらもグラデーションと同様に中間点を加えることで濁らなくなります。

@keyframes gradient {
  0% {
    background-color: blue;
  }
  50% {
    background-color: #ff0088;
  }
  100% {
    background-color: yellow;
  }
}

注意点として3点間を経由しますので、CSSトランジションでは対応でません。animationプロパティを用いてアニメーションさせる必要があります。