アニメーションに残像をつける

昨日書いた左右に動く箱に残像をつけてみた。box-shadow を使ったものと linear-gradient を使ったものがあるけど、box-shadow を使ったほうが動き的にもコード的にも良い。

影で残像を表現したもの

Demo - Shadow | JSFiddle

箱が端に到着した後、残像が遅れるように消える。

箱の大きさ以上に残像の幅を伸ばすと、残像には見えなくなる。

.box {
  margin: 20px 0;
  width: 20px;
  height: 20px;
  background-color: slategray;
}

.box-move {
  -webkit-animation: move 2s infinite;
}

@-webkit-keyframes move {
  0% {
    transform: translateX(0);
  }
  25% {
    box-shadow: -6px 0 0 hsla(210,13%,50%, .5);
  }
  50% {
    box-shadow: none;
    transform: translateX(300px);
  }
  75% {
    box-shadow: 6px 0 0 hsla(210,13%,50%, .5);
  }
  100% {
    transform: translateX(0);
  }
}

グラデーションで残像を表現したもの

Demo - Gradient | JSFiddle

箱が端に到着した瞬間に残像が消える。残像幅が小さいとわかりにくいかもしれないけど、幅が大きくなるとはっきりわかる。

CSS では残像の幅を .box の幅に加えてる。これはアニメーション部分で移動距離を出すときなどに邪魔になってくるのと、残像幅を変更するときに直さないといけない箇所が多いので面倒。

.box {
  margin: 20px 0;
  width: 26px; /* ( 箱の幅 20px ) + ( 残像幅 6px ) */
  height: 20px;
  background-image: -webkit-linear-gradient(left, slategray 20px, transparent 20px);
}

.box-move {
  -webkit-animation: move 2s infinite;
}

@-webkit-keyframes move {
  0% {
    transform: translateX(0);
  }
  25% {
    background-image: -webkit-linear-gradient(left, transparent 0, hsla(210,13%,50%, .5) 6px, slategray 6px);
  }
  50% {
    background-image: -webkit-linear-gradient(right, slategray 20px, transparent 20px);
    transform: translateX(294px); /* ( 移動距離 300px ) - ( 残像幅 6px ) */
  }
  75% {
    background-image: -webkit-linear-gradient(right, transparent 0, hsla(210,13%,50%, .5) 6px, slategray 6px);
  }
  100% {
    transform: translateX(0);
  }
}