.l2r{
    animation: l2r 30s linear infinite alternate;
}
@keyframes l2r{
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(calc(-100% + 100vw));
    }
}
@keyframes fadingbgAnim {
    from{
        background-position-y: 0px;
    }
    to{
        background-position-y: 60px;
    }
}

.text-bg-gif {
    background: url(/assets/images/water-bg.jpg);
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:textbg-anim 20s linear infinite;
}
.bg-gif {
    background: url(/assets/images/water-bg.jpg) #ffffffbb; 
  background-size: cover;
  background-blend-mode: overlay;
  animation:textbg-anim 20s linear infinite;
}
@keyframes textbg-anim{
  from{
      background-position:0 bottom;
  }
  to{
      background-position:1000px bottom;
  }
}