@property --size {
  syntax: '<length>';
  inherits: true;
  initial-value: 10vmin;
}

@keyframes move {
  0% { translate: -100% -50% }
  100% { translate: 100vw -50%; }
}

:root {
  --size: 10vmin;
  margin: 0;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: #666;
  
  &::after {
    content: "";
    position: absolute;
    width: calc(var(--size) * 1.1);
    height: calc(var(--size) * 2.6);
    background: linear-gradient(#ff0 18%, #0000 0 82%, #006 0);
    animation: move 15s linear infinite;
    top: 50%;
  }
  
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    background: repeating-linear-gradient(90deg, #000 0 calc(var(--size) / 4), #fff 0 calc(var(--size) / 2)) 0 0 / 100% 100% no-repeat, #666;
    transition: width 1s
  }
  
  &:hover {
    &::before {
      width: 0;
    }
  }
}