CSSで宇宙空間を表現する。

実際の動作を確認したい人向け
https://jsfiddle.net/junya_5102/dnsd0gwe/1/

html

<div class="space">
  <div class="stars">
    <span class="star anim"></span>
    <span class="star anim"></span>
    <span class="star anim"></span>
    <span class="star anim"></span>
    <span class="star anim"></span>
    <span class="star anim"></span>
    <span class="star anim"></span>
    <span class="star anim"></span>
    <span class="star anim"></span>
    <span class="star anim"></span>
    <span class="star anim"></span>
    <span class="star anim"></span>
  </div>
</div>

CSS

.space{
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background-color: black;

  -webkit-perspective: 500px;
  -moz-perspective: 500px;
  perspective: 500px;
}

.stars{
  position: absolute;
  top: 50%;
  left: 50%;

  width: 1px;
  height: 1px;
}

.star{
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;
  width: 5px;
  height: 5px;
  border-radius: 100%;

  transform: 
    translate(-50%,-50%) rotate(var(--angle)) 
    translateY(-100px) translateZ(0);
}

.star:nth-of-type(1){  --angle: 00deg;  --z: -100px; --delay: -2.0s;}
.star:nth-of-type(2){  --angle: 30deg;  --z: -200px; --delay: -1.3s;}
.star:nth-of-type(3){  --angle: 60deg;  --z: -10px;  --delay: -4.2s;}
.star:nth-of-type(4){  --angle: 90deg;  --z: -90px;  --delay: -3.3s;}
.star:nth-of-type(5){  --angle: 120deg; --z: -180px; --delay: -2.1s;}
.star:nth-of-type(6){  --angle: 150deg; --z: -300px; --delay: -5.3s;}
.star:nth-of-type(7){  --angle: 180deg; --z: -150px; --delay: -6.7s;}
.star:nth-of-type(8){  --angle: 210deg; --z: -220px; --delay: -1.5s;}
.star:nth-of-type(9){  --angle: 240deg; --z: -250px; --delay: -2.4s;}
.star:nth-of-type(10){ --angle: 270deg; --z: -30px;  --delay: -3.1s;}
.star:nth-of-type(11){ --angle: 300deg; --z: -80px;  --delay: -5.0s;}
.star:nth-of-type(12){ --angle: 330deg; --z: -120px; --delay: -7.1s;}

.anim{
  background-color: white;
  animation: anim 4s var(--delay) linear infinite;
}

@keyframes anim{
  from{ 
    transform: 
      translate(-50%,-50%) rotate(var(--angle)) 
      translateY(-100px) translateZ(var(--z));
  }
  to{   
    transform: 
      translate(-50%,-50%) rotate(var(--angle)) 
      translateY(-75vw) translateZ(var(--z));
  }
}

animation-delayをマイナス値で指定するとアニメーションが途中から開始されます。
例: 3sのアニメーションで animation-delay: -2s;とすると 2s後から開始します。

jsで タブアクティブ時のみアニメーションを再生する

var star = Array.from(document.querySelectorAll('.star'));

// active
window.addEventListener('focus',function () {
  if(star[0].classList.contains('anim')) return;
  star.forEach(function (s) {
    s.classList.add('anim');
  });
});

// non active
window.addEventListener('blur',function () {
  star.forEach(function (s) {
    s.classList.remove('anim');
  });
});

windowがフォーカスされたら .starに animクラスを追加
windowのフォーカスが外れたら .starの animクラスを削除

対応ブラウザ

Google Chrome , Safari , Firefox
※いずれも最新版で検証しました。