<div class="screen">
  <div class="hearts">
    <img class="logo top" src="http://neozink.com/the-love-machine/resources/logos/logo-love-machine.png" alt="The Love Machine by Neozink TM" title="The Love Machine by Neozink TM" />
  </div><!-- .hearts -->
  <div class="hearts bottom">
    <img class="logo" src="http://neozink.com/the-love-machine/resources/logos/logo-neozink.png" alt="Neozink TM" title="Neozink TM" />
  </div><!-- .hearts -->
</div><!-- .screen -->

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
html,
body {
  width: 100%;
  height: 100%;
}
.screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #000000 0%, #3a3a3a 100%);
}
.hearts {
  position: absolute;
  top: 0;
  overflow: visible;
  width: 100%;
  height: 32px;
  z-index: 10;
  order: 1;
  margin-top: 5px;
  background-image: url(http://neozink.com/the-love-machine/resources/background/hearts-gap.png);
  background-position: top 2px center;
  background-size: 1920px auto;
  background-repeat: no-repeat;
  animation-name: hearts-bounce;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-fill-mode: backwards;
  
  &.bottom {
    position: absolute;
    top: auto;
    bottom: 0;
    margin-bottom: 5px;
  }

  .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;

    &.top {
      top: 0;
      transform: translate(-50%, 0%);
    }
  }
}


@keyframes hearts-bounce {
  0% {
    background-position: top 2px center;
  }
  50% {
    background-position: top -34px center;
  }
  100% {
    background-position: top 2px center;
  }
}