<h1>CSS Particles</h1>
<span class="particle particle--a"></span>
<span class="particle particle--b"></span>
<span class="particle particle--c"></span>
<span class="particle particle--d"></span>
<span class="particle particle--e"></span>
<span class="particle particle--f"></span>
<span class="particle particle--g"></span>
<span class="particle particle--h"></span>

html{
  background: azure;
}

h1{
  font-family: sans-serif;
  font-size: 2.5rem;
  position:absolute;
  left:40%;
  -webkit-animation:fadein 5s;
}

.particle{
  position:absolute;
  top:50%;
  left:50%;
  width:1rem;
  height:1rem;
  border-radius:100%;
  background-color:#ffffff;
  background-image:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.3) 75%,rgba(0,0,0,0));
  box-shadow:inset 0 0 1px 1px rgba(0,0,0,.25);
}

.particle--a{
  -webkit-animation:particle-a 3s infinite linear;
  animation:particle-a 2s infinite linear;
  background-color:red;
  opacity:0;
}
.particle--b{
  -webkit-animation:particle-b 3s infinite linear;
  animation:particle-b 2s infinite linear;
  -webkit-animation-delay:.125s;
  background-color:pink;
  opacity:0;
}
.particle--c{
  animation:particle-c 2s infinite linear;
  -webkit-animation-delay:.25s;
  background-color:green;
  opacity:0;
}
.particle--d{
  animation:particle-d 2s infinite linear;
  -webkit-animation-delay:.375s;
  background-color:blue;
  opacity:0;
}
.particle--e{
  animation:particle-e 2s infinite linear;
  -webkit-animation-delay:.5s;
  background-color:orange;
  opacity:0;
}
.particle--f{
  animation:particle-f 2s infinite linear;
  -webkit-animation-delay:.625s;
  background-color:yellow;
  opacity:0;
}
.particle--g{
  animation:particle-g 2s infinite linear;
  -webkit-animation-delay:.75s;
  background-color:purple;
  opacity:0;
}
.particle--h{
  animation:particle-h 2s infinite linear;
  -webkit-animation-delay:.875s;
  background-color:grey;
  opacity:0;
}

@-webkit-keyframes particle-a {
  0% {
    -webkit-transform:translate(8.25rem, -.45rem);
    z-index:1;
    opacity:1;
    -webkit-animation-timing-function:ease-in-out;
  } 25% {
    width:1.5rem;
    height:1.5rem;
  } 50% {
    -webkit-transform:translate(-9.25rem, -.45rem);
    z-index:1;
    opacity:1;
    -webkit-animation-timing-function:ease-in-out;
  } 55% {
    z-index:-1;
  } 75% {
    width:.5rem;
    height:.5rem;
    opacity:.5;
  } 100% {
    -webkit-transform:translate(8.25rem, -.45rem);
    z-index:1;
    opacity:1;
  }
}
@-webkit-keyframes particle-b{
  0% {
    -webkit-transform:translate(7.5rem, 2.9rem);
    z-index:1;
    opacity:1;
    -webkit-animation-timing-function:ease-in-out;
  } 25% {
    width:1.5rem;
    height:1.5rem;
  } 50% {
    -webkit-transform:translate(-8.5rem, -3.7rem);
    z-index:1;
    opacity:1;
    -webkit-animation-timing-function:ease-in-out;
  } 55% {
    z-index:-1;
  } 75% {
    width:.5rem;
    height:.5rem;
    opacity:.5;
  } 100% {
    -webkit-transform:translate(7.5rem, 2.9rem);
    z-index:1;
    opacity:1;
  }
}
@-webkit-keyframes particle-c{
  0% {
    -webkit-transform:translate(5.55rem, 5.75rem);
    z-index:1;
    opacity:1;
    -webkit-animation-timing-function:ease-in-out;
  } 25% {
    width:1.5rem;
    height:1.5rem;
  } 50% {
    -webkit-transform:translate(-6.7rem, -6.5rem);
    z-index:1;
    opacity:1;
    -webkit-animation-timing-function:ease-in-out;
  } 55% {
    z-index:-1;
  } 75% {
    width:.5rem;
    height:.5rem;
    opacity:.5;
  } 100% {
    -webkit-transform:translate(5.55rem, 5.75rem);
    z-index:1;
    opacity:1;
  }
}
@-webkit-keyframes particle-d{
  0% {
    -webkit-transform:translate(2.7rem, 7.5rem);
    z-index:1;
    opacity:1;
    -webkit-animation-timing-function:ease-in-out;
  } 25% {
    width:1.5rem;
    height:1.5rem;
  } 50% {
    -webkit-transform:translate(-3.9rem, -8.5rem);
    z-index:1;
    opacity:1;
    -webkit-animation-timing-function:ease-in-out;
  } 55% {
    z-index:-1;
  } 75% {
    width:.5rem;
    height:.5rem;
    opacity:.5;
  } 100% {
    -webkit-transform:translate(2.7rem, 7.5rem);
    z-index:1;
    opacity:1;
  }
}
@-webkit-keyframes particle-e{
  0% {
    -webkit-transform:translate(-.45rem, 8.2rem);
    z-index:1;
    opacity:1;
    -webkit-animation-timing-function:ease-in-out;
  } 25% {
    width:1.5rem;
    height:1.5rem;
  } 50% {
    -webkit-transform:translate(-.45rem, -9.2rem);
    z-index:1;
    opacity:1;
    -webkit-animation-timing-function:ease-in-out;
  } 55% {
    z-index:-1;
  } 75% {
    width:.5rem;
    height:.5rem;
    opacity:.5;
  } 100% {
    -webkit-transform:translate(-.45rem, 8.2rem);
    z-index:1;
    opacity:1;
  }
}
@-webkit-keyframes particle-f{
  0% {
    -webkit-transform:translate(-3.65rem, 7.5rem);
    z-index:1;
    opacity:1;
    -webkit-animation-timing-function:ease-in-out;
  } 25% {
    width:1.5rem;
    height:1.5rem;
  } 50% {
    -webkit-transform:translate(3rem, -8.5rem);
    z-index:1;
    opacity:1;
    -webkit-animation-timing-function:ease-in-out;
  } 55% {
    z-index:-1;
  } 75% {
    width:.5rem;
    height:.5rem;
    opacity:.5;
  } 100% {
    -webkit-transform:translate(-3.65rem, 7.5rem);
    z-index:1;
    opacity:1;
  }
}
@-webkit-keyframes particle-g{
  0% {
    -webkit-transform:translate(-6.4rem, 5.9rem);
    z-index:1;
    opacity:1;
    -webkit-animation-timing-function:ease-in-out;
  } 25% {
    width:1.5rem;
    height:1.5rem;
  } 50% {
    -webkit-transform:translate(5.9rem, -6.4rem);
    z-index:1;
    opacity:1;
    -webkit-animation-timing-function:ease-in-out;
  } 55% {
    z-index:-1;
  } 75% {
    width:.5rem;
    height:.5rem;
    opacity:.5;
  } 100% {
    -webkit-transform:translate(-6.4rem, 5.9rem);
    z-index:1;
    opacity:1;
  }
}
@-webkit-keyframes particle-h{
   0% {
    -webkit-transform:translate(-8.3rem, 3.2rem);
    z-index:1;
    opacity:1;
    -webkit-animation-timing-function:ease-in-out;
  } 25% {
    width:1.5rem;
    height:1.5rem;
  } 50% {
    -webkit-transform:translate(7.6rem, -3.4rem);
    z-index:1;
    -webkit-animation-timing-function:ease-in-out;
  } 55% {
    z-index:-1;
  } 75% {
    width:.5rem;
    height:.5rem;
    opacity:.5;
  } 100% {
    -webkit-transform:translate(-8.3rem, 3.2rem);
    z-index:1;
    opacity:1;
  }
}

@-webkit-keyframes fadein{
  from {
    opacity:0;
  } to {
    opacity:1;
  }
}