Animated Hearts Background Effect

The Code

HTML

<div id="background-effect" class="background-effect--hearts">
  <div id="background-effect__animations">
    <div class="hearts-layer-bokeh">
    </div>
    <div class="hearts-layer">
    </div>
  </div>
</div>

CSS

#background-effect.background-effect--hearts {
  bottom: 0;
  left: 50%;
  top: 0;
  margin: 0;
  position: fixed;
  width: 100%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: -100;
}

#background-effect.background-effect--hearts div {
  position: absolute;
  width: 100%;
  height: 100%;
}

#background-effect.background-effect--hearts #background-effect__animations {
  -webkit-animation: fade-in 2s cubic-bezier(0.55, 0.06, 0.68, 0.19);
  animation: fade-in 2s cubic-bezier(0.55, 0.06, 0.68, 0.19);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(12%, rgba(22,57,133,0.13125)), color-stop(50%, rgba(255,255,255,0.0375)), color-stop(87%, rgba(192,68,84,0.1)));
  background: linear-gradient(180deg, rgba(22,57,133,0.13125) 12%, rgba(255,255,255,0.0375) 50%, rgba(192,68,84,0.1) 87%);
}

#background-effect.background-effect--hearts .hearts-layer-bokeh {
  background-image: url("/image/interface/background/hearts/layer_bokeh_01.png"),url("/image/interface/background/hearts/layer_bokeh_02.png");
  background-position: 0 0px, 0 0;
  background-repeat: repeat, repeat;
  background-size: 512px 512px, 512px 512px;
  -webkit-animation-duration: 300s;
  animation-duration: 300s;
  -webkit-animation-name: hearts-layer-bokeh-animation;
  animation-name: hearts-layer-bokeh-animation;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  opacity: 0.0625;
}

#background-effect.background-effect--hearts .hearts-layer {
  background-image: url("/image/interface/background/hearts/layer_hearts_04.png"),url("/image/interface/background/hearts/layer_hearts_03.png"),url("/image/interface/background/hearts/layer_hearts_02.png");
  background-position: 0 0px, 0 0px, 0 0;
  background-repeat: repeat, repeat, repeat;
  background-size: 512px 512px, 512px 512px, 512px 512px;
  -webkit-animation-duration: 75s,50s;
  animation-duration: 75s,50s;
  -webkit-animation-name: hearts-layer-animation-x, hearts-layer-animation-y;
  animation-name: hearts-layer-animation-x, hearts-layer-animation-y;
  -webkit-animation-iteration-count: infinite, infinite;
  animation-iteration-count: infinite, infinite;
  -webkit-animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1),linear;
  animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1),linear;
  opacity: 0.15625;
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes hearts-layer-bokeh-animation {
  from {
    background-position: 0 0px, 0 0;
  }

  to {
    background-position: 0 -10239px, 0 -6143px;
  }
}

@keyframes hearts-layer-bokeh-animation {
  from {
    background-position: 0 0px, 0 0;
  }

  to {
    background-position: 0 -10239px, 0 -6143px;
  }
}

@-webkit-keyframes hearts-layer-animation-x {
  0% {
    background-position-x: 0px, 0px, 0;
  }

  25% {
    background-position-x: 256px,-256px,128px;
  }

  50% {
    background-position-x: 0px, 0px, 0;
  }

  75% {
    background-position-x: -256px,256px,-128px;
  }

  100% {
    background-position-x: 0px, 0px, 0;
  }
}

@keyframes hearts-layer-animation-x {
  0% {
    background-position-x: 0px, 0px, 0;
  }

  25% {
    background-position-x: 256px,-256px,128px;
  }

  50% {
    background-position-x: 0px, 0px, 0;
  }

  75% {
    background-position-x: -256px,256px,-128px;
  }

  100% {
    background-position-x: 0px, 0px, 0;
  }
}

@-webkit-keyframes hearts-layer-animation-y {
  from {
    background-position-y: 0px, 0px, 0;
  }

  to {
    background-position-y: -2559px, -1535px, -1023px;
  }
}

@keyframes hearts-layer-animation-y {
  from {
    background-position-y: 0px, 0px, 0;
  }

  to {
    background-position-y: -2559px, -1535px, -1023px;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  #background-effect.background-effect--hearts .hearts-layer-bokeh {
    background-image: url("/image/interface/background/hearts/layer_bokeh_01.x2.png"),url("/image/interface/background/hearts/layer_bokeh_02.x2.png");
    -webkit-animation-duration: 450s;
    animation-duration: 450s;
  }

  #background-effect.background-effect--hearts .hearts-layer {
    background-image: url("/image/interface/background/hearts/layer_hearts_04.x2.png"),url("/image/interface/background/hearts/layer_hearts_03.x2.png"),url("/image/interface/background/hearts/layer_hearts_02.x2.png");
    -webkit-animation-duration: 100s,75s;
    animation-duration: 100s,75s;
  }
}