背景を動かす

夕暮れ時の北の空。

@property

かつては、背景をアニメーションしようとすると、見える範囲を適当にクリップした上で、その後ろで大きめの背景を動かすしかなかった。要は出来合いの絵の見える位置を変えるだけ。

例えばこんな感じ。

css


.smpl1 {
  background-image: radial-gradient(
    circle,
    #0000ff 25%,
    #000000 25%
  );
  background-size: 200% 200%;
  animation: smpl1 10s linear infinite;
}
@keyframes smpl1 {
    0% { background-position:   0% 50%; }
   50% { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

縦横それぞれ200％の大きさの背景の真ん中に background-image で勾配の無いグラデーション（？）で円を描いている。で、その背景の位置を変えることで、円が動いているように見せている。

問題は、この円という形やその色を変えられないこと。そのため css だけだと単純な動きしか見せられなくて、複雑なことをしようとすると JavaScript に頼らざるを得なかった。

それがいつの間にか @property なんてものが使えるようになっていて、位置、角度、色、等をかなり自由に変化させられるようになっていた。

折角なので、いくつか試してみる。

percentage

css


@property --pos-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
.smpl2 {
  background: radial-gradient(
    circle 200px at var( --pos-x ) 50%,
    #0000ff 50%,
    #000000 50%
  );
  animation: smpl2 10s linear infinite;
}
@keyframes smpl2 {
    0% { --pos-x:   0%; }
   50% { --pos-x: 100%; }
  100% { --pos-x:   0%; }
}

横方向の位置をパーセント値で持つプロパティを定義し、その値を0%から100%まで、つまり端から端まで動かしている。

従来の例と一見同じだが、こちらは背景全体を動かすのではなく、背景内の円の描画位置を動かしているのだな。

angle

css


@property --deg-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.smpl3 {
  background: conic-gradient(
    #0000ff var( --deg-a ),
    #000000 var( --deg-a )
  );
  animation: smpl3 5s linear infinite;
}
@keyframes smpl3 {
    0% { --deg-a:   0deg; }
  100% { --deg-a: 360deg; }
}

角度の値を持つプロパティを定義し、その値を0度から360度まで変化させている。

color

css


@property --col-a {
  syntax: "<color>";
  inherits: false;
  initial-value: #000000;
}
.smpl4 {
  background-color: var( --col-a );
  animation: smpl4 5s linear infinite;
}
@keyframes smpl4 {
    0% { --col-a: #000000; }
   50% { --col-a: #0000ff; }
  100% { --col-a: #000000; }
}

色の値を持つプロパティを定義し、その値を黒から青に変化させている。

最後に

ここまで色々試しておいて言うのもどうかと思うが、俺はアニメーションでじわっと変わるよりも、スパッと切り替わる方が好きだったりする。