アニメーションするボケ

Result

アニメーションで動くボケた玉をCSSで実装したもの
方法はシンプルで、以下のようにkeyframesで作ったアニメーションをanimation-duration、animation-delay、transform-originで位置やタイミングを各ボケ毎にずらしてあります。

.background span:nth-child(17) {
  color: #583C87;
  top: 19%;
  left: 52%;
  animation-duration: 12.9s;
  animation-delay: -0.1s;
  transform-origin: 8vw -3vh;
  box-shadow: 40vmin 0 7.7373093096vmin currentColor;
}
.background span:nth-child(18) {
  color: #583C87;
  top: 82%;
  left: 14%;
  animation-duration: 15s;
  animation-delay: -8.6s;
  transform-origin: 2vw -9vh;
  box-shadow: -40vmin 0 5.0331967733vmin currentColor;
}
・
・
・

html

<div class="background"> 
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

via

Bokeh effect (CSS)