CSS だけでモーションブラー風のエフェクトをつける #CSS

この記事の概要

アニメーションにおいて、モーションブラーという概念があります。
現実世界で動いているものを撮影すると残像が尾を引くので、それを再現した効果です。

同じ速度・動き方でも、モーションブラーをつけた方が素早く動いているような印象を出しやすいです。
通常 CSS アニメーションではモーションブラーが再現できないのですが、やりたくなったのでどうにかそれっぽくしてみました。

備忘録がてら記事にします。

完成品

動く距離、速度、イージングはすべて同じなのですが、左の方が「ビュンッ」て感じが出ているのではないでしょうか。

全体の説明とコード

通常の CSS アニメーションを実装する
アニメーションする方向と逆に box-shadow や drop-shadow をつけて残像を再現する
- 動き始めや動き終わりのときにはオフセットをつけない
- 加速が大きいタイミングでオフセットを大きくする
外連味で blur もかける
- 「無しより有りの方がそれらしい気がした」程度の内容

@keyframes motion-blur {
  0% {
    filter: drop-shadow(0 0) blur(0);
    translate: 0 0;
  }
  45% {
    filter: drop-shadow(0 -4px 0 rgb(0 0 0 / 0.8)) blur(1px);
  }
  100% {
    filter: drop-shadow(0 0) blur(0);
    translate: 0 200px;
  }
}

.blur-element {
  animation: 250ms motion-blur infinite ease-in-out;
}

drop-shadow のオフセット距離やブラー半径は、アニメーションする時間や距離によっても変わります。
計算でどうこうというより、目で見ながらの調整になると思います。

translate は移動しているだけなので説明を省略し、filter だけに焦点を当てます。

まず、 0% の時点ではまだ動いていないのでボケは発生しません。
そのため drop-shadow(0 0) つまり「何も無い」を指定しています。

次に、加速が大きくなるタイミングにあわせてボケた影をつけます。
イージング関数などによっても気持ち良いタイミングが変わると思いますが、ここでは 45% の時点でボケ幅が最大になるようにしました。

そして 100% つまり停止時に向けてボケを 0 にします。

本来の CSS アニメーションに 3 行程度コードを足しただけですが、それなりに視覚効果としてフックになった気がします。

最後に

今回の手段だと安っぽく見えてしまう条件も結構あると思います。
アニメーション時間が長いとか、複雑な動きをするとか、要素が非常に大きいとか……。

ただ「CSS でもちょっとしたモーションブラーっぽいことならできる」と思って制作に向かうと、変に視野狭窄にならずに済む気がします。
何かのときに役立てば良いなと思ってこの記事は終わりにします。

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

Devトークでお話してくださる方も募集中です！