.test{
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 400px;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
  
  .text--animated-fill {

    font: 700 4em/1 "Oswald", sans-serif;
    letter-spacing: 0;
    padding: .25em 0 .325em;
    display: block;
    margin: 0 auto;
    text-shadow: 0 0 80px rgba(255,255,255,.5);
  
  /* Clip Background Image */
  
    background: url("img/animated-fill.jpg") repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
  
  /* Animate Background Image */
  
    -webkit-text-fill-color: transparent;
    -webkit-animation: aitf 1s linear infinite alternate;
  
  /* Activate hardware acceleration for smoother animations */
  
    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
  
  }
  
  /* Animate Background Image */
  
  @-webkit-keyframes aitf {
    0% { background-position: 0% 80%; }
    100% { background-position: 100% 80%; }
  }