Stargate Portal - Animação em CSS de um portal de plasma

stargatePortal.css

.bg {
  background: #111 url('https://res.cloudinary.com/shanomurphy/image/upload/v1519972582/stargate_yjqmmj.jpg') no-repeat center;
  background-size: cover;
  width: 177vh;
  height: 100vh;
  margin: 0 auto;
  position: relative;
}

.portal {
  
  width: 77vh;
  height: 73vh;
  position: absolute;
  top: 18vh;
  left: 50vh;
  overflow: hidden;
  
  &:before {
    content: '';
    display: block;
    width: 77vh;
    height: 77vh;
    border-radius: 50%;
    background: black url(https://res.cloudinary.com/shanomurphy/image/upload/v1519979298/animated-water_iwl9ae.gif);
    background-size: cover;
    animation: filter-animation 15s infinite;
  }
  
}

@keyframes filter-animation {
  
  0% {
    filter: hue-rotate(0deg) contrast(3) saturate(1);
  }
  
  50% {
    filter: hue-rotate(45deg) contrast(1) saturate(6);
  }
  
  100% {
    filter: hue-rotate(0deg) contrast(3) saturate(1);
  }
  
}

body {
  background: black;
}

stargatePortal.html

<div class="bg">
  
  <div class="portal"></div>
  
</div>